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

TurtleOrange

于 2022-09-15 15:29:03 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：实践分享文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/TurtleOrange/article/details/126872319

分享同时被 2 个专栏收录

40 篇文章

订阅专栏

实践

30 篇文章

订阅专栏

本文介绍了在Vue项目中，通过四种不同的方式显示图片，重点讨论了为什么第二种方法（直接绑定URL）会导致图片无法显示的问题，原因是Vue在打包时修改了路径。解决方案是采用动态替换图片名称的方式，如第四种方法所示，将图片名字单独保存并动态绑定到图片源上，以实现图片的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看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。

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