适用场景:
img标签是通过v-bind动态指定src路径的,本地可以正常显示,一旦打包之后就无法在线上显示了。
Bug原因:
Vite打包只会处理静态src路径,动态src路径只会原样保留。
<!-- 静态src会被处理为正确地址 相对路径还是绝对路径都可以正常处理,
结果是:本地、线上均可以正常显示 -->
<img src="@/assets/xx.png" />
<!-- 动态src不会被处理 相对路径还是绝对路径都不会被Vite处理
结果就是:本地可以显示,线上无法正常显示 -->
<img :src="@/assets/{imgPath}" />
方法:
第一种情况:需要动态指定的资源很少,就那么几个
直接使用import 引入图片资源,然后添加即可。
<template>
<div>测试页面</div>
<img :src="myImg" />
</template>
<script lang="ts" setup>
import myImg from '/public/static/avatar.png'
</script>
第二种情况:需要动态指定的资源非常多,不想一个一个import引入,
那么可以这样:
1、把所有静态资源放到public/目录下
2、引用的资源路径改为 绝对路径 并去掉public前缀
如:在index.vue中引入 public/static/home/首页.png,那就直接使用
/static/home/首页.png 即可。
<img :src="'/static/home/' + item.iconPath" />
<script setup>
const item = {
iconPath: '首页.png'
}
</script>
原理:
在Vite中, / 开头的绝对路径默认可以访问到 public/ 目录下的内容,所以 /public/static/home/首页.png 和 /static/home/首页.png 都可以访问到本地资源。
但是在打包时,Vite默认会原样保留绝对路径的引用地址,但不会保留public文件夹,即public下的static文件夹会被直接输出到dist/目录下,而没有public文件夹了。
所以虽然这两种都可以访问到本地资源,但是考虑到默认的打包处理方式,还是要去除掉/public前缀才能保证打包之后也可以正常引入静态资源。
第三种情况:新需求需要动态指定的资源非常多,同时项目是老项目,不能随意更改静态资源路径
那么可以尝试Vite官方提供的 import.meta.glob API。
这个方法一般用于批量引入js或者ts文件,但实际上这个方法就是 很多import语句的集合而已,import是可以引入图片的,所以import.meta.glob 也同样可以引入图片资源,只不过需要加入配置项 as:'url' 就可以了。
通常来说,我们可以用ES提供的 import 来代替 commonJS 的require(),在webpack中,动态引入静态文件可以这样:
<img :src="require(imgPath)" />
而在Vite中,我们虽然不能直接使用require(),但可以这样批量引入静态资源:
<template>
<div>
<img
v-for="(image, index) in images"
:key="index"
:src="image"
alt="dynamic image"
width="100"
height="100"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const obj = import.meta.glob('@/assets/*.{png,jpg}', {
as: 'url'
})
const images = ref<string[]>([])
for (const key in obj) {
obj[key]().then((res) => {
images.value.push(res)
})
}
</script>
这样一来,Vite就会帮我们自动import对应的静态资源,所以即使在线上环境,我们也可以展示动态指定路径的静态资源了。
但是要注意:vite提供的这个批量import的方法不能保证每次返回时都是按照顺序返回的!要进行额外处理才行,最简单的办法是用 数字来充当文件名,然后按数字来排序,不过这种方法不是很优雅,希望评论区有人可以提供更简介的思路。
错误的方法:
提前准备好数据,使用for循环来遍历数据,然后使用import()来按序添加,
错误的地方在于 :
import xxx from @/xxx.png 是模块导入语法,是可以导入图片资源的,但是 import() 是动态导入方法,只能用来导入 js资源(如:.js、.json、.ts、 .vue文件),不能用来导入图片资源。
async function getImgList() {
for (const item of manageList.value) {
let imgModule = await import('/src/assets/images/courseCenter/' + item.imgName)
imgList.value.push(imgModule.default) // 报错 不能导入非js资源
}
}