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

相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，如定制化背景，动态展示头像等。可能也犯过如下错误

# 错误描述

页面直接调用图片资源的方案

<img src="@/assets/common/head.jpg"/>

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

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

 export  default{
data() {
return {
imgSrc:  '@/assets/common/head.jpg'
   }
  }
}

</script>

结果运行图片加载失败。什么原因？原来是因为在打包时会被自动加上hash值从而引用失败，产生差异

#解决办法

1. 使用 网络上的图片资源

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

2. 使用import导入本地资源

import imgSrc from  '@/assets/common/head.jpg'
export  default{
data() {
return {
imgSrc: imgSrc
  }
 }
}

3. 使用 require 导入

data() {
return{
imgSrc: require("@/assets/common/head.jpg")
 }
}

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