Vue中圖片Src使用變量的方法
更新時間：2019年10月30日 08:31:24 作者：果汁涼茶丶
這篇文章主要介紹了Vue中圖片Src使用變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
相信不少同學在開發(fā)中都有遇到圖片路徑需要使用變量引入的情況，如定制化背景，動態(tài)展示頭像等?？赡芤卜高^如下錯誤
# 錯誤描述
頁面直接調用圖片資源的方案
<img src="../../static/images/web_bg.png" />
改寫成變量形式，于是如下編寫
<template>
<img :src="imgSrc" />
</template>
<script>
export default {
data() {
return {
imgSrc: '../../images/web_bg.png'
}
}
}
</script>
結果運行圖片加載失敗。什么原因？原來是因為在打包時會被自動加上hash值從而引用失敗，產生差異
# 解決辦法
1. 使用 網絡上的圖片資源
data() {
return {
imgSrc: 'http://easy-stage.longhu.net/files/images/7f458e55f6954078aa8e8efb2c45cc40.jpg'
}
}
2. 使用import導入本地資源
import imgSrc from '../../images/web_bg.png'
export default {
data() {
return {
imgSrc: imgSrc
}
}
}
3. 使用 require 導入
data() {
return {
imgSrc: require('../../images/web_bg.png')
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vuex實現歷史記錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
在實際項目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導航，下面這篇文章就來給大家介紹關于vue實現動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
有時候,頻繁調用的函數,我們需要把它掛載在全局的vue原型上,方便調用,這篇文章主要為大家詳細介紹了Vue中掛載全局的具體操作,需要的可以參考下2024-03-03
今天小編就為大家分享一篇axios對請求各種異常情況處理的封裝方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要為大家詳細介紹了在vue環(huán)境單頁面項目下,如何實現不定高虛擬列表,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
今天小編就為大家分享一篇關于vue-router實現編程式導航的代碼實例，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Vue-CLI 3.X 部署項目至生產服務器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
在vue項目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項目創(chuàng)建的后初始化首次使用stylus安裝方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01