现实情况远非想的那么单纯容易清晰：当优越感逐渐转为失落感甚至挫败感时，当由坚信自己是一块金子到怀疑自己是一粒沙子时，愤怒，迷茫，自卑，焦急，躁动就开始与日俱增。
相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，如定制化背景，动态展示头像等。可能也犯过如下错误
# 错误描述
页面直接调用图片资源的方案
<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中图片Src如何使用变量的方法到此结束。要想赢，就必须不能怕输。不怕输，结果未必能赢。可是怕输，结果则必须是输。小编再次感谢大家对我们的支持！
