Electron Vite打包后,部分图标未显示的解决方案


背景

这个问题,弄了一晚上,头都大了,找了一堆博客也没解决。主要参考这个:https://blog.csdn.net/m0_73845616/article/details/129741099

下面讲一下我的解决方案。


解决方案

上面链接里的方法,我采用第二、三个都没有解决。第一个也需要稍作改动才能用。

  1. 第一个需要导入一个vue组件,图片用svg的话,直接将svg代码包裹在下面就行。
  2. 在使用该图片的地方,import该组件后,再用<component :is="组件名"/>代替<img :src=""/>,这样使用,打出来的包是没问题的。

    以前设置图片,是用img+一个响应式的变量,这样打包后显示不出来。

    需要改成component+is的方式,这样is设置为一个相应式变量(一个组件),也能展示出图片,最后打包出来也没有问题。

原因分析

主要原因还是vite对打包后资源的访问方式不同,静态设置的src没有问题,vite会改动相应的src原位置到相应的打包位置。但通过相应式动态设置的src,vite不会改动,最后就没有改资源的映射到路径,最后就找不到资源,无法展示。

相关推荐
糕冷小美n12 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥12 小时前
Technical Report 2024
java·服务器·前端
沐墨染12 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion12 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks12 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼13 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴13 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
shadow fish14 小时前
react学习记录(三)
javascript·学习·react.js
小疙瘩15 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git15 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习