vue3 动态style[‘background‘] 图片url 打包后图片不显示没有打包到目录的为你

news2024/11/15 18:33:25

做了一个项目需求是 动态赋予多个div的背景图片,背景svg是后台数据中给的。刚开始显示不出来后来解决了(好用代码也如下可参考),后来又发现一个问题是 开发环境下可以正常显示,但部署后 svg图片不显示,排查发现是打包后根本没有把这个url对应的图片放到部署目录的assets中。找了很长时间。我当下遇到这个问题 需要两个步骤解决。

1、解决 部署环境下为啥打包的问题 

定义获取路径方法的方式返回资源路径,估计像这样定义成函数再调用。打包时才能被发现资源并打包()
const getImgUrl = (name) =>{
 // return new URL('/assets/svgs/'+name, import.meta.url).href
  return new URL(`/src/assets/svgs/${name}`, import.meta.url).href
}

const getDivStyle = (r2) => {
const style = {}
调用方法获取资源
style['background'] =  "url('"+getImgUrl(r2.ImageUrl.slice(8))+"#svgView(preserveAspectRatio(none)')"
)

2、这样打包后发现小部分svg版文件能显示,还有一部分显示不了。然后又在网上找发现原因是太小的图片 被打包编译成了base64,因为放尺寸大一点的图片就显示正常。做法是把打包的base64尺寸阈值调成0,这样所有svg图片都可原样正常打包放入到assets中就解决了设置方法如下

在vite.config中把 assetsInlineLimit 设置为 0 可以完全禁用此项
 build: {
    assetsInlineLimit: 0,
    // ...
  },

后记小小的眯一会就解决了,看来小憩一会的睡眠 对脑袋和解决为你很有帮助啊

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2088735.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1万多条教师资格证考试题库ACCESS\EXCEL数据库

今天这个数据库是具备独特教#师资格模拟备考训练学习的题库,内置大小二级分类,包含幼#儿教#师资格证、小#学教#师资格证、中#学教#师资格证,数据结构也很简单,就一个表格,可以非常方便的应用在各个方面。 幼#儿教#师资…

初识Linux | Linux的环境搭建与基本指令

🍬 mooridy-CSDN博客 🧁C专栏(更新中!) 目录 Linux环境搭建 step1:购买云服务器 step2:使用 XShell 远程登陆到 Linux 快捷键 Linux基本指令 打印所处路径:pwd 创建目录 mkdir 【目录名】 ls指令 新…

初识C++|list类的使用及模拟实现

🍬 mooridy-CSDN博客 🧁C专栏(更新中!) 目录 list的介绍 list的使用 list的构造 list 容量 list 访问 list 增删查改 迭代器 迭代器失效问题 list模拟实现 list与vector的对比 emplace_back和push_back的区别…

回溯法-n皇后

N皇后问题 问题定义 棋盘: 一个nn的网格。皇后: 一种特殊棋子,可以攻击同一行、同一列或两条对角线上的任何棋子。目标: 在棋盘上放置n个皇后,使得它们之间没有任何一个能够攻击到对方。 问题难点 确保皇后之间不在同一行或列。避免皇后在对角线上相…

英伟达:相同的剧本

财报超预期,盘后却大跌8%,最近好公司好像都犯了这种病。 英伟达在美股财报季压轴登场, 营收净利那可都是三位数的增长,再创新高。 都说炒股看的的是未来,在英伟达这贯彻地很彻底,业绩爆表只能算及格&#…

【操作系统】有A、B和C三个作业同时到达,执行时间分别为4,3,6,且在系统中以单道方式运行,则可以获得最短的平均周转时间的执行顺序为()。

目录 题目分析答案类似题 题目 有A、B和C三个作业同时到达,执行时间分别为4,3,6,且在系统中以单道方式运行,则可以获得最短的平均周转时间的执行顺序为()。 分析 周转时间:程序从进入系统到完成的时间总…

nodejs基于微信小程序的书籍销售系统论文源码调试讲解

2 开发环境与相关技术 2.1 NODEJS技术 Nodejs语言是目前使用率最高的一个语言类程序,并且他的代码还是开源的,任何的软件开发者都可以进行使用,目前已经在人类计算机编程语言发展史上产生了深远影响。所以Nodejs语言是很成熟的,将…

平价运动耳机品牌推荐有哪些?五大爆款推荐,小白购前必看

对于很多人来说,运动可能是为了减肥,但是对我而言,运动从来不是为了身材焦虑,而是为了享受挥洒汗水后的畅快淋漓,尤其在天气渐暖的时节,约上三五好友,一起在夕阳下奔跑,在微风中骑行…

在线流程图制作指南:轻松绘制高质量流程图的方法!

流程图作为一种过程诊断工具,广泛应用于工作和生活中。无论是软件程序的算法流程图、请假审批流程图、产品工艺流程图,还是医院就诊流程等,流程图都能直观地描述具体的工作步骤,帮助决策者识别问题并制定解决方案。本文将通过即时…

800道软件测试面试题与答案+pdf+在线版

2024年软件测试行情不行,今年很多人想着金九银十换一个好工作,几次面试总感觉很多东西明明记住了,突然又忘了。 在整理资料的时候,被我发现一个宝藏内容!!⚠ 如何准备好面试,大家都头疼我总结…

C++语法基础(二)

C复合类型 结构体 1. C的结构,定义结构体类型的变量时,可以省略struct关键字 2. 可以定义成员函数,在结构体中的成员函数内部可以直接访问本结构体的成员,无需通过“.”或“->” 联合 1. C的联合,定义联合体类型的变…

聊聊Promise,catch和then的关系,rejected状态如何在then链中”透传“直到被处理

Promise在前端开发中用的很多了,感觉好像很熟了,但真的有些细节追究起来好像又有点是是而非。 今天聊聊Promise中的then和catch,以下面这个代码片段为例,如果能正确说出打印的内容,说明已经掌握了,后面的内…

Linux教程六:linux系统目录介绍

一、Linux系统目录介绍 1、关于目录的命令行讲解 需要确保自己使用了root账号登陆 cd / # 进入根目录 cd 目录路径 #进入到指定目录中去 #路径有绝对路径和相对路径,在Linux中,绝对路径以/开头ll #列举当前目录下所有文件和文件夹 (ls -l…

活动报道 | 盘古信息亮相东莞中小数转供需对接会(滨海片区),深度剖析典型案例

为积极响应国家关于加快中小企业数字化转型的号召,推动东莞市中小企业数字化进程,8月29日,由东莞市工业和信息化局主办,长安镇经济发展局承办,东莞市软件行业协会协办的东莞市中小企业数字化转型城市试点供需对接会&am…

Vue3中的defineExpose的认识

文章目录 defineExpose子组件父组件&#xff1a;总结&#xff1a; defineExpose 使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例&#xff0c;** 不会 **暴露任何在 <script setup> 中声明的绑定。 可以通过 def…

BH1750光照传感器详解(STM32)

目录 一、介绍 二、传感器原理 1.原理图 2.工作原理&#xff1a;结构框图 三、程序设计 main.c文件 bh1750.h文件 bh1750.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 BH1750是一款数字型光照强度传感器&#xff0c;能够获取周围环境的光照强度。内置16bitAD转…

通帆科技“液氢微型发电站”:点亮氢能产业新征程

新质生产力的蓬勃发展正以磅礴之力推动产业的转型升级&#xff0c;氢能产业作为新质生产力的璀璨之星&#xff0c;成为新能源领域的关键增长极。 8 月 28 日&#xff0c;通帆新能源科技&#xff08;山东&#xff09;有限公司精心研发的 500kw “液氢微型发电站”产品成功下线交…

【C/C++】C语言中的内存分布

在C语言中&#xff0c;内存分布主要可以分为以下几个区域&#xff1a; 栈&#xff08;Stack&#xff09;&#xff1a;由编译器自动分配和释放&#xff0c;存放函数的参数值、局部变量的值等。 堆&#xff08;Heap&#xff09;&#xff1a;一般由程序员分配和释放&#xff0c;若…

电容应用原理

电容器是电子电路中不可或缺的元件&#xff0c;其在电路中承担的任务繁多&#xff0c;既可以用作储能元件&#xff0c;也能用于滤波、旁路和去耦。 电容的基本原理 电容的基本工作原理可以理解为电荷的存储和释放。电容器由两块金属板和夹在中间的绝缘介质构成&#xff0c;当…

Unity 中使用SQLite数据库

文章目录 0.参考文章1.Presentation —— 介绍2.&#xff08;SQLite4Unity3d&#xff09;Unity中直接使用SQLite的插件3.创建数据库4.创建表5.Navicat Premium&#xff08;数据库可视化&#xff09;6.增删改查6.1 增6.2 删6.3 改6.4 查 0.参考文章 https://blog.csdn.net/Chin…