vue中需要引入大量图片时，如何循环图片路径引入

最新推荐文章于 2024-08-30 17:16:03 发布

原创最新推荐文章于 2024-08-30 17:16:03 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

在Vue项目中，当面临大量图片引入的需求时，遇到的问题是使用`:src`绑定图片路径导致被当作字符串处理，从而无法正常显示图片。解决方案是将图片存放于`static`目录下，而非`assets`目录，通过相对路径动态引用。

当项目中遇到大量图片需要引入时，需要循环路径去渲染，:src="" 总是获取到的路径被当做字符串处理，图片无法显示。

图片应该放在static下面，不要放在assets下。

<ul class="flex">
	<li @click="selectImgGroup(item,index)" v-for="(item,index) in imgData" :key='index'>
	   <img :src="item.src" width="64" alt="">
	</li>
</ul>

const imgData = [
  {src:'../../../static/images/DeviceImage/accelerator.png'},
  {src:'../../../static/images/DeviceImage/access_point.png'},
  {src:'../../../static/images/DeviceImage/accessPoint3Com.png'},
  ...
];