vue3+vite导入静态资源的方法
vite搭建vue3静态资源
·
vue2中导入根目录下asserts文件夹中的图片,可以用require的方式,但是由于vite放弃了require的引入方式,而import导入只能解析字符串,所以vite在官网提供了新的导入方式
针对多个引入资源,先将静态资源放在asserts文件夹下,然后在准备一个导出函数,放哪都行,但是出于规范化,在src文件夹下创建utils文件夹并创建一个名为tool.js的文件,写入代码
const getAssetsFile = (url) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
export default {
getAssetsFile,
};
在目标组件中导入
import tool from '@/utils/tool'
在对应位置使用
<van-cell v-for="item in images" :key="item.id" :title="`第${item.id}题`">
<template #label>
<van-grid :border="false" :column-num="1">
<van-grid-item>
<van-image
:src="tool.getAssetsFile(`${item.id}.png`) "
/>
</van-grid-item>
</van-grid>
<!-- 定义时间 -->
<div class="meta">
<span>{{'时间'}}</span>
</div>
</template>
</van-cell>
当然这只是一种,更多方法移步官网
更多推荐
已为社区贡献2条内容
所有评论(0)