vue3 require动态加载图片及动态加载svg图

最新推荐文章于 2024-06-18 13:51:18 发布

li@h

最新推荐文章于 2024-06-18 13:51:18 发布

阅读量660

点赞数 2

文章标签： chrome 前端

本文链接：https://blog.csdn.net/weixin_49066399/article/details/137046312

版权

以下是本地图片及引用本地的svg图报错

//这里是获取本地的png图片报错
 <div class="flex-items swiper-item" v-for="(item, index) in list"
      :key="index">
            <img  class="brand-img" :src="require(item.url)"/>
</div>
const list=ref([{url:'@/assets/brand1.png'},{url:'@/assets/brand1.png'}])

//获取本地svg图报错代
 <div class="flex-items swiper-item" v-for="(item, index) in listSvg"
      :key="index">
            <img  class="brand-img" :src="item.url"/>
            <!-- <img  class="brand-img" :src="require(item.url)"/>-->
</div>


const listSvg=ref([{url:'@/assets/svg/service-icon-black-1.svg'},{url:'@/assets/svg/service-icon-black-1.svg'}])

解决方法
1.解决本地图片引用

<div class="flex-items swiper-item" v-for="(item, index) in list"
      :key="index">
            <img  class="brand-img" :src="item.url"/>
</div>
const list=ref([{url:require('@/assets/brand1.png')},{url:require('@/assets/brand1.png')}])

2.解决本地引用svg图

 <div class="flex-items swiper-item" v-for="(item, index) in listSvg"
      :key="index">
            <img  class="brand-img" :src="item.url"/>
</div>

引用svg图需要先导入svg图片
import black1 from "@/assets/svg/service-icon-black-1.svg";
const listSvg=ref([{url:black1 },{url:black1 }])