方法一：將圖片資源放入項目 /static 目錄下，使用絕對或相對路徑引用即可

// 文件結(jié)構(gòu) |-- src | |-- components | | |-- banner.vue |-- static | |-- images | | |-- pic.jpg <template><div id="banner"><img :src="img"></div> </template><script> export default {data () {name: 'banner'return : {// img: '../../static/images/pic.jpg' // 相對路徑img: '/static/images/pic.jpg' // 絕對路徑}} } </script>

方法二：在 <script> 腳本中，使用 import 引入文件

// 文件結(jié)構(gòu) |-- src | |-- assets | | |-- pic.jpg | |-- components | | |-- banner.vue <template><div id="banner"><img :src="img"></div> </template><script> import banner1 from '../assets/pic.jpg'export default {data () {name: 'banner'return : {img: banner1}} } </script> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Vue如何在data中正确引入图片路径的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。