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

I.先说结论

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

---

目录

I.先说结论

II.遇到的问题

III.尝试过什么解决方式

IV.原因

V.结尾的废话

---

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

所以就需要如开头所写使用require()来处理相对路径

---

V.结尾的废话

至此解决了行内样式设置背景图片无效的问题. 虽然倒也不是非要用行内样式,但是要写事件去修改背景,所以就必须得解决行内样式的问题.

过程中阻碍最大的还是因为知识浅薄, 对问题的描述不够准确. 始终无法接近正确的搜索词,便一直看不到正确答案. 只能在无穷无尽的废话中浪费时间. 希望这篇博客的标题能让和我一样憨的人找到答案.最后希望单位能招个前端吧...