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')
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue-router如何實現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實現(xiàn)history模式配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue實現(xiàn)菜單切換功能
這篇文章主要介紹了vue實現(xiàn)菜單切換功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
Vue實現(xiàn)跑馬燈效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
vue3之向echarts組件傳值的問題分析
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3項目頁面實現(xiàn)echarts圖表漸變色的動態(tài)配置的實現(xiàn)步驟
在開發(fā)可配置業(yè)務平臺時,需要實現(xiàn)讓用戶對項目內echarts圖表的動態(tài)配置,讓用戶脫離代碼也能實現(xiàn)簡單的圖表樣式配置,顏色作為圖表樣式的重要組成部分,其配置方式是項目要解決的重點問題,所以本文介紹了Vue3項目頁面實現(xiàn)echarts圖表漸變色的動態(tài)配置
2024-10-10
vue中的provide/inject的學習使用
本篇文章主要介紹了vue中的provide/inject的學習使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
vue實現(xiàn)動態(tài)添加元素(可刪除)
文章介紹了如何在Vue中動態(tài)添加和刪除元素,通過使用Vue的響應式數據和v-for指令,可以輕松地實現(xiàn)這一功能,文章還詳細講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化
2024-12-12
vue任意關系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication
這篇文章主要介紹了vue任意關系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-10-10
Vue中使用vue-plugin-hiprint插件進行打印的功能實現(xiàn)
hiprint 是一個web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動端,PC端瀏覽器,angular,vue,react 等分頁預覽,打印,操作簡單,運行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進行打印,需要的朋友可以參考下
2025-04-04
Vue3視頻播放器組件Vue3-video-play新手入門教程
這篇文章主要給大家介紹了關于Vue3視頻播放器組件Vue3-video-play新手入門教程的相關資料,本文實例為大家分享了vue-video-player視頻播放器的使用配置,供大家參考,需要的朋友可以參考下
2023-12-12