做了一个项目需求是 动态赋予多个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,
// ...
},
后记小小的眯一会就解决了,看来小憩一会的睡眠 对脑袋和解决为你很有帮助啊