vue中的js引入图片必须用require

最新推荐文章于 2024-06-15 20:47:06 发布

原始森林(#`O′)

最新推荐文章于 2024-06-15 20:47:06 发布

阅读量464

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_51567383/article/details/118327542

版权

本文介绍了在Vue项目中如何从components文件夹下的index.vue文件中加载并显示位于assets文件夹内的图片资源。提供了三种方法：直接在img标签中写路径、通过数组保存图片路径并循环输出，以及使用网络图片。

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

如何在components里面的index.vue怎样能把assets里面的图片拿出来。
1.在img标签里面直接写上路径：

<img src="../assets/a1.png" class="" width="100%"/>

2.利用数组保存再循环输出：

复制代码

<el-carousel-item v-for="item in carouselData" :key="item.id">
        <img :src="item.url" class="carouselImg"/>
        <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
      carouselData:[
      {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
      {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
      {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
      ]
    }),