vue使用v-for渲染img图片，图片不显示

最新推荐文章于 2024-09-15 23:41:35 发布

约妲己吃火锅

最新推荐文章于 2024-09-15 23:41:35 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_44469200/article/details/103471566

版权

引用时用绑定属性 v-bind:src="" 或者 :src=""

//引入
import img1 from '../static/imgage/img1.png'
//注册
component: {
  img1
}
//使用
<img :src="img1" />

上面这样是错误的引用图片路径方法，loader读取不到图片路径，应该使用 img: require（'图片路径）

下面看看我做的一个正确的v-for 渲染图片方法例子，仅供参考

 <ul>
   <li :key="index" v-for="(item, index) in imges">
      <a >
        <figure>
          <img :src="item.img1" />
        </figure>
        </a>
        <a >
          <figure>
             <img :src="item.img2" />
          </figure>
        </a>
        <a >
          <figure>
            <img :src="item.img3" />
          </figure>
        </a>
        <a >
          <figure>
            <img :src="item.img4" />
          </figure>
        </a>
   </li>
</ul>

data () {
   return {
        imges: [
	        {
	          img1: require('../../images/blog/sidebar-instagram-img-1.jpg'),
	          img2: require('../../images/blog/sidebar-instagram-img-2.jpg'),
	          img3: require('../../images/blog/sidebar-instagram-img-3.jpg'),
	          img4: require('../../images/blog/sidebar-instagram-img-4.jpg')
	        },
	        {
	          img1: require('../../images/blog/sidebar-instagram-img-5.jpg'),
	          img2: require('../../images/blog/sidebar-instagram-img-6.jpg'),
	          img3: require('../../images/blog/sidebar-instagram-img-7.jpg'),
	          img4: require('../../images/blog/sidebar-instagram-img-8.jpg')
	        },
	        {
	          img1: require('../../images/blog/sidebar-instagram-img-9.jpg'),
	          img2: require('../../images/blog/sidebar-instagram-img-10.jpg'),
	          img3: require('../../images/blog/sidebar-instagram-img-11.jpg'),
	          img4: require('../../images/blog/sidebar-instagram-img-12.jpg')
	        }
      ]
   }
}