vue v-for中给予图片路径问题

最新推荐文章于 2024-08-02 16:22:31 发布

叮当_z

最新推荐文章于 2024-08-02 16:22:31 发布

阅读量170

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/2301_76601728/article/details/131534701

版权

在Vue.js组件中，使用`v-for`循环动态绑定`img`标签的`src`属性时遇到问题，`src`的值被解析为字符串而非变量。文章提到`require`是一个表达式，可用于动态加载资源，但这里的绑定没有正确处理导致图片路径未生效。解决方案是确保正确引用和解析数据对象中的变量。

摘要由CSDN通过智能技术生成

<template>
<div>
  <ul>
      <li v-for ="item,index in array" :key="index">
          <img :src="item.url">
          <p>{{item}}</p>
      </li>
  </ul>
</div>
</template>

<script>
export default {
data(){
  return{
    array:[
      {url:require(`./picture/3.jpg`), name:'眼影'},
      {url:require(`./picture/4.jpg`), name:'眼影'},
      {url:require(`./picture/5.jpg`), name:'眼影'},
      {url:require(`./picture/3.jpg`), name:'眼影'},
    ]
  }
},
}
</script>

<style>

</style>

打开控制台显示：img 的src 已经是一个字符串，它不是我们想要的变量了。
它对a.url进行了一次解析变成了字符串，就完事了，绑定变量，就是解析一次。而对于url 来说，它本来就是变量，无法再进行分割解析，所以它会去data 里面去找，如果找不到，才报错。
把item.EnName 变成图片的地址,有人提到了require 方法,require 它是一个表达式，可以进行赋值操作。
————————————————
版权声明：本文为CSDN博主「懒啦」的原创文章，
原文链接：https://blog.csdn.net/qq_47648083/article/details/121383667