记录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的哈希值。

相关推荐
Zacks_xdc11 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
尚学教辅学习资料11 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|11 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊11 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之11 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦12 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro13 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹13 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风13 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱14 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript