Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)

在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题

qq_36048145

3690人浏览 · 2024-02-04 02:17:06

qq_36048145 · 2024-02-04 02:17:06 发布

I.先说结论

在Vue里使用直接使用标签内style设置行内样式的背景图片时, 应使用require来模块化相对路径的资源. 不然相对路径的图片无法展现

II.遇到的问题

以前曾遇到过这个问题,但之前可以使用OSS或者直接去别的网站偷url过来,再加上也不是写前端的,所以也没太在意这个问题. 但这次不得不实现使用本地图片来替换背景的需求.一开始使用Base64编码后直接糊在上面是可以使用的. 图片url也是可以使用的.唯独相对路径不能使用. 这时候怀疑是相对路径错了,于是写了个img标签使用src来试试发现是可以的,地址没有问题. (不过也确实是路径的问题)

症状:

Base64编码 -> 可以使用

图片url地址 -> 可以使用

标签内设置样式style -> 不起作用

img标签中的src使用相对路径 -> 可以使用 ------------------------->证明相对路径没有错

于是尝试在内部样式里使用相对路径 -> 可以使用

III.尝试过什么解决方式

1. 大部分的帖子都是在说相对路径不要写错,教你怎么写相对路径.这个这里就不赘述了. 不过问题出在路径上是毋庸置疑的(毕竟在这里也没别的东西可以错了不是)

2. 还有一部分帖子会强调没有设置图片展示的空间, 没设置宽高,所以看不到..... 显然这里不是(不过也还是试了)

3.使用绝对路径.....这个就算了

4.或者还有一些帖子会给出一些不知道什么环境下的路径(还是路径问题),或者强调相对路径的写法,路径前面有没有. 有没有/, 相对路径要往上找几层找到根目录再往下找之类的.......

5.问了bingAI, 把我的代码原封不动扔给我,表示就这么写的.......可能没把环境交代清楚?懒得再去试一次了

总之就是一直解决不了在这里反复折腾路径. 直到尝试打印行内样式设置后的style和内部样式设置后的style, 行内样式设置的会正常写在上面. 而内部样式设置的不会显示任何属性. 意识到两好像不太一样,才真正输入正确的搜索词找到答案

IV.原因

CSS里面设置的内部/外部样式 里的background-image: url( )

和行内样式 里的backgroundImage: url( )

的运行方式(编译规则)不太一样, 在使用相对路径的时候就会触及这个问题.

Vue会对内部/外部样式中设置的资源进行处理,将其拷贝到输出目录并改变引用路径

而行内样式就结果来看应该是没这么做,打印内容原封不动,图片也不会展示

可以参考这个博客

vue项目中设置background: url() 是行内样式不生效，样式表是可以的_vue background url不生效-CSDN博客https://blog.csdn.net/MISS_zhang_0110/article/details/134466363?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-134466363-blog-120866625.235%5Ev43%5Econtrol&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-134466363-blog-120866625.235%5Ev43%5Econtrol&utm_relevant_index=2