记录van-rate组件输入图片打包后无效问题

真夜
119 阅读1分钟

问题复现

在使用vat-rate组件中输入参数icon与void-icon可以自定义图片

开发环境
image.png

在dev后开发环境有效果，但在生产环境显示无效

生产环境
image.png

根据生产代码可以发现vite未将图片做处理直接写入生产代码

生产环境 image.png

问题解决

使用new URL 但方式进行路径的动态写入

export const getAssestImg = (file: string) => {
  return new URL(`/src/assets/${file}`, import.meta.url).href;
};
//使用
            <van-rate
              class="score"
              v-model="item.siteScore"
              :icon="getAssestImg('/images/find/xing2.png')"
              :void-icon="getAssestImg('/images/find/xing1.png')"
              size="0.4rem"
              gutter="0.1rem"
              readonly
            />

小细节

如果在开发模式上你会发现又没有效果了，但在生产模式下会有效果

image.png

这是开发模式下的图片路径，会发现指向了utils而不是assets下面，原因在于import.meta.url取的是当前执行函数的文件所在的文件夹，因为开发模式中我的图片工具写在utils下面所以显示的是这个路径，如果该执行函数与图片所处同一个文件夹下面，那开发环境也会有效果。

注意！！ 如果在生产环境上静态资源做了处理，如分包，将css js 图片文件等这类进行文件夹分类，那将也无效。

生产环境打包默认全部打到assets文件下面，如果做了分包需额外处理配置。

vite图片打包原理

在vite中图片打包官方默认如果需要动态就使用 new URL（图片所在文件路径,import.meta.url）.href

如果图片小于50kb将直接转为base64嵌入到代码中，作为一个变量

image.png

大于50kb的vite将所有图片转为一个对象，k值为我们传入的路径，value为打包后实际对象的路径

Ih = e => (
new URL(Object.assign({
...其他图片
    "/src/assets/bg_banner.jpg": Pu,
  ...其他图片
   
})[`/src/assets/${e}`],import.meta.url).href)

这是打包后的函数 /src/assets/bg_banner.jpg为k，既在开发时输入的值，Pu是vite打包后实际的图片数据

const Pu = "/assets/bg_banner-Bkxmh7e8.jpg"
  , Qu = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqQAAABSCAYAAACCEsaEAA..."

上面一个base64 一个大于50kb图片的实际路径，携带了Bkxmh7e8的哈希值。

avatar
文章
阅读
粉丝