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

问题复线

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

开发环境

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

生产环境

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

生产环境

问题解决

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

js 复制代码
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
            />

小细节

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

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

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

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

vite图片打包原理

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

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

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

js 复制代码
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打包后实际的图片数据

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

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

相关推荐
90后的晨仔几秒前
Vue 3 + TypeScript + Pinia 实战架构指南
前端
zhennann4 分钟前
VonaJS多租户同时支持共享模式和独立模式
数据库·typescript·node.js·nestjs
妄小闲16 分钟前
免费html网页模板 html5网站模板 静态网页模板
前端·html·html5
困惑阿三35 分钟前
React 展示Markdown内容
前端·react.js·前端框架
lichong9511 小时前
【大前端++】Android studio Log日志高对比度配色方案
android·java·前端·json·android studio·大前端·大前端++
没头脑的男大1 小时前
如何把pdf转换的excell多个表格合并
java·前端·pdf
妄小闲1 小时前
html网站模板 html网页设计模板源码网站
前端·html
Restart-AHTCM2 小时前
前端核心框架vue之(路由篇3/5)
前端·javascript·vue.js
段振轩2 小时前
Docker nginx容器部署前端项目。
前端·nginx·docker
让时光到此为止。3 小时前
vue的首屏优化是怎么做的
前端·javascript·vue.js