快捷導(dǎo)航

Vue中圖片Src使用變量的方法

更新時(shí)間：2019年10月30日 08:31:24 作者：果汁涼茶丶

這篇文章主要介紹了Vue中圖片Src使用變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

相信不少同學(xué)在開發(fā)中都有遇到圖片路徑需要使用變量引入的情況，如定制化背景，動(dòng)態(tài)展示頭像等?？赡芤卜高^如下錯(cuò)誤

# 錯(cuò)誤描述

頁面直接調(diào)用圖片資源的方案

<img src="../../static/images/web_bg.png" />

改寫成變量形式，于是如下編寫

<template>
 <img :src="imgSrc" />
</template>

<script>
export default {
 data() {
  return {
   imgSrc: '../../images/web_bg.png'
  }
 }
}
</script>

結(jié)果運(yùn)行圖片加載失敗。什么原因？原來是因?yàn)樵诖虬鼤r(shí)會(huì)被自動(dòng)加上hash值從而引用失敗，產(chǎn)生差異

# 解決辦法

1. 使用網(wǎng)絡(luò)上的圖片資源

data() {
 return {
  imgSrc: 'http://easy-stage.longhu.net/files/images/7f458e55f6954078aa8e8efb2c45cc40.jpg'
 }
}

2. 使用import導(dǎo)入本地資源

import imgSrc from '../../images/web_bg.png'
export default {
 data() {
  return {
   imgSrc: imgSrc
  }
 }
}

3. 使用 require 導(dǎo)入

data() {
 return {
  imgSrc: require('../../images/web_bg.png')
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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