Nuxt中v-bind动态绑定img src不显示的解决方案

动态绑定图片不显示的问题

问题现象

在Nuxt项目中，若通过v-for循环遍历数据，并尝试使用:src="item.url"来动态绑定图片地址，图片通常无法正常渲染，只有写成静态结构时才能正常显示。

Webpack编译机制与原因

原因分析

当图片路径以静态字符串形式直接写入模板时，Webpack会在构建过程中对其进行编译处理，从而解析出打包后正确的图片真实路径。然而，如果路径是动态生成的，Webpack不会对其进行编译处理，而是将原始字符串（例如'~/assets/img/home.png'）原封不动地填入img标签的src属性中。这会导致浏览器尝试请求一个不存在的绝对路径（如'http://xxx.xxx.xxx/~/assets/i...'），从而造成图片加载失败。

动态图片加载的解决方案

解决方法一

将图片资源部署到服务器，直接使用网络URL路径进行引用。

解决方法二

在JavaScript中使用require函数配合相对路径来引用图片。

{ src: require("../static/gzEducation/fl/1.png") }
//跳出1层还是2层目录，根据自己的所在位置来决定

数据定义示例

 data() {
  return {
   flList: [
     { src: require("../static/gzEducation/fl/1.png") },
   ],
 }

Vue循环结构示例

  <section >
   <div class="item"v-for="(item,index) in flList" :key="index">
   <img :src="item.src" alt="背景图片">
   </div>
  </section>

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