Vue 动态绑定图片地址，使用require也失效问题解决方案

先看4种方法显示图片的效果

代码：

<div v-if="weather">
  {{ weather.location.name }} | {{ weather.now.text }} | {{ weather.now.temperature }}℃
  <img src="../../assets/img/weather/0.png" alt="" style="width:40px;height:40px;" />
  <img :src="iconUrl" alt="" style="width:40px;height:40px;" />
  <img :src="require('../../assets/img/weather/0.png')" alt="" style="width:40px;height:40px;" />
  <img :src="require('../../assets/img/weather/' + imgName)" alt="" style="width:40px;height:40px;" />
div>

data() {
  return {
    weather: "",
    iconUrl: require('../../assets/img/weather/0.png'),
    url: "../../assets/img/weather/0.png",
    imgName: '0.png',
  }
},

相信很多人会使用第二种办法实现动态绑定地址，但是图片无法显示，原因是：

vue项目在运行打包时会对代码进行压缩，从而修改iconUrl里的绝对路径，如果我们不修改data里的iconUrl，会显示错误。而 require(‘图片存放路径’ + imgName)，写图片存放路径是因为有了图片存放路径 他会进入图片存放路径里去寻找imgName，如果不写图片存放路径的话，他会去 ./ 路径下去寻找imgName。

解决方案：
类似于第四种解决办法，把图片名字单独拿出来，动态替换图片名字，即可实现图片动态绑定显示。