Vue中图片Src使用变量的方法

<img src="/UploadFiles/2021-04-02/web_bg.png">

改写成变量形式，于是如下编写


<template>
 <img :src="/UploadFiles/2021-04-02/imgSrc">

结果运行图片加载失败。什么原因？原来是因为在打包时会被自动加上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')
 }
}



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。