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

以下是本地图片及引用本地的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 }])