目錄：
注意：本地json文件和json文件里的圖片地址都必須寫在static 靜態(tài)文件夾里；否則json文件里的url地址找不到。
major_info.json文件里的圖片路徑寫法
頁面通過v-bind的方式加載：
PS：vue中圖片src路徑賦值
vue中引入static文件夾中圖片，本以為src中直接寫入圖片所在路徑即可，結(jié)果發(fā)現(xiàn)圖片無法顯示，控制臺報404錯誤，圖片無法找到。網(wǎng)上找到解決方案，在此mark一下，以便以后查詢。
圖片src路徑動態(tài)賦值
<img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" /><script>...methods: { getThumb(type) { let thumb = { WMS: require("img/world.jpg"), WFS: require("img/wfs.jpg"), tool: require("img/tool.jpg") }; return thumb[type]; }}...</script>img為設(shè)置的路徑別名
... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': path.resolve(__dirname, '../src/assets'), 'img': resolve('static/img'), '%': resolve('./static') } },...固定路徑
如果是固定路徑的話:
<img class="thumb" width="200px" height="150px" src="/static/img/world.jpg" />
總結(jié)
以上所述是小編給大家介紹的vue中img src 動態(tài)加載本地json的圖片路徑寫法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧！
新聞熱點
疑難解答
