溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue中如何實現img src動態加載本地json的圖片路徑，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
目錄：
注意：本地json文件和json文件里的圖片地址都必須寫在static 靜態文件夾里；否則json文件里的url地址找不到。
major_info.json文件里的圖片路徑寫法
頁面通過v-bind的方式加載：
PS：vue中圖片src路徑賦值
vue中引入static文件夾中圖片，本以為src中直接寫入圖片所在路徑即可，結果發現圖片無法顯示，控制臺報404錯誤，圖片無法找到。網上找到解決方案，在此mark一下，以便以后查詢。
圖片src路徑動態賦值
<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為設置的路徑別名
...
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" />
關于“vue中如何實現img src動態加載本地json的圖片路徑”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
