之前在Vue2可以Dom中直接通过 「require」渲染,但是vue3不可以
<div v-for="(item,index) of list" :key="index">
<img :src="require(`/img/icon-${index}.png`)"/>
</div>
如果在vue3里面直接使用require的话,vite会报错:
【找不到名称“require”。是否需要安装 Node.js 的类型定义? 请尝试运行 npm i --save-dev @types/node
,然后将 "node" 添加到 tsconfig 的 types 字段。ts-plugin(2591)】
结论:个人感觉在vite中不能使用require引入图片资源,因为这里的require貌似是webpack提供的一种加载能力,由于我们并非使用的webpack作为项目的构建工具,我们使用的是Vite,因此这里必须转用 Vite提供的静态资源载入。可以参考Vite - new URL 文档。
Vue3写法
<div v-for="(item,index) of list" :key="index">
<img :src="item.icon"/>
</div>
<script setup>
import { ref } from 'vue'
const list = ref([
{
name: 'name1',
icon: new URL('@/assets/img/home/fun-icon-1.svg', import.meta.url).href
},
{
name: 'name2',
icon: new URL('@/assets/img/home/fun-icon-2.svg', import.meta.url).href
},
{
name: 'name3',
icon: new URL('@/assets/img/home/fun-icon-3.svg', import.meta.url).href
},
{
name: 'name4',
icon: new URL('@/assets/img/home/fun-icon-4.svg', import.meta.url).href
},
])
</script>