vue3+vite如何引入本地静态图片
vue3+vite如何引入本地静态图片
·
在vite+vue3的项目中,使用img显示本地静态图片,如果直接引入的话不会显示出来,vite找不到对应的图片路径,需要使用下面的方式进行处理。
import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL。
export default (image) => {
// image为相对路径
// 第二个参数:当前路径的URL
return new URL(`../assets/img/${image}`, import.meta.url).href;
};
<div class="home" v-for="(item, index) in tabData" :key="index" @click="change(index, item)">
<img :src="getImageURL(currentIndex === index ? item.imageActive : item.image)" />
<span :style="{ 'color': currentIndex === index ? 'var(--primary-color)' : '' }">{{ item.text }}</span>
</div>
image的路径为图片的具体路径。
注意:无法在 SSR 中使用
更多推荐
所有评论(0)