一、問題概述

<img :src="data.src" class="nav-img">

1. html結構如下：

<ul class="nav-list"><li v-for="data in navlist" :key="data.index"><div class="item"><!--{{ data.src }}--><img :src="data.src" class="nav-img"><p class="nav-title">{{ data.title }}</p><p class="nav-desc">{{ data.desc }}</p></div></li> </ul>

2. navlist數據如下：

圖片存在 ../../assets/images/index/ 文件夾下

navlist: [{'title': '魚塘', 'desc': 'world', 'src': '../../assets/images/index/navlist01.png'},{'title': '魚塘', 'desc': 'world', 'src': '../../assets/images/index/navlist01.png'},{'title': '社群', 'desc': 'world', 'src': '../../assets/images/index/navlist02.png'},{'title': '積分', 'desc': 'world', 'src': '../../assets/images/index/navlist03.png'},{'title': '活動', 'desc': 'world', 'src': '../../assets/images/index/navlist04.png'},{'title': '直播', 'desc': 'world', 'src': '../../assets/images/index/navlist05.png'},{'title': '資源', 'desc': 'world', 'src': '../../assets/images/index/navlist06.png'},{'title': '魚友', 'desc': 'world', 'src': '../../assets/images/index/navlist07.png'},{'title': '魚圈', 'desc': 'world', 'src': '../../assets/images/index/navlist08.png'},{'title': '會員', 'desc': 'world', 'src': '../../assets/images/index/navlist09.png'}]

?3. 頁面效果如下

圖片無法顯示

4. 瀏覽器中html解析如下

路徑正確，但圖片不顯示

5. assets與static文件夾的區別

assets：在項目編譯的過程中會被webpack處理解析為模塊依賴，只支持相對路徑的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相對資源路徑，將有webpack解析為模塊依賴?

static：在這個目錄下文件不會被被webpack解析。他會直接被復制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件，這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對路徑的形式引用：/static[filename]?
根據webpack的特性，總的來說就是static放不會變動的文件，asserts放可能會變動的文件

二、解決方案

1. 用require()處理src路徑

{'title': '魚塘', 'desc': 'world', 'src': require('../../assets/images/index/navlist01.png')}

data () {return {navlist: [{'title': '魚塘', 'desc': 'world', 'src': require('../../assets/images/index/navlist01.png')},{'title': '魚塘', 'desc': 'world', 'src': require('../../assets/images/index/navlist01.png')},{'title': '社群', 'desc': 'world', 'src': require('../../assets/images/index/navlist02.png')},{'title': '積分', 'desc': 'world', 'src': require('../../assets/images/index/navlist03.png')},{'title': '活動', 'desc': 'world', 'src': require('../../assets/images/index/navlist04.png')},{'title': '直播', 'desc': 'world', 'src': require('../../assets/images/index/navlist05.png')},{'title': '資源', 'desc': 'world', 'src': require('../../assets/images/index/navlist06.png')},{'title': '魚友', 'desc': 'world', 'src': require('../../assets/images/index/navlist07.png')},{'title': '魚圈', 'desc': 'world', 'src': require('../../assets/images/index/navlist08.png')},{'title': '會員', 'desc': 'world', 'src': require('../../assets/images/index/navlist09.png')}]}}

2. html結構不變

<ul class="nav-list"><li v-for="data in navlist" :key="data.index"><div class="item"><!--{{ data.src }}--><img :src="data.src" class="nav-img"><p class="nav-title">{{ data.title }}</p><p class="nav-desc">{{ data.desc }}</p></div></li> </ul>

3. 頁面效果如下

正常顯示

4. 瀏覽器中html解析如下

webpack打包之后src路徑

總結

以上是生活随笔為你收集整理的vue中v-for图片src路径错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。