我在 vue js 的样式标签中加载背景图像时遇到问题



我在我的vue应用程序中尝试了所有的东西,但即使我得到了.html文件来处理这个问题,我也无法得到我的app.vue文件来加载背景图像。我在网上试过所有的东西,但都没有成功。让我们直接来解决这个问题。

background-image: url("/@/components/images/Cover1.jpg");

这个代码对没有任何作用

我甚至添加了背景色,效果很好。除了图像以外的所有内容都显示出来。所以我认为这是因为这条路。我尝试了从~@@/contensions/images/Cover1.jpg到/contensions/images/Cover1.jpg的所有内容,但没有,即使当我使用/contensions/simages/Coverl.jpg和/@@/contents/images/Cover1.jpg vue js时也不会给我带来错误。

这是文件夹和文件的结构。我需要的图像在图像文件夹中

(2个错误是因为vetur错误,并且没有与标记链接(我正在从app.vue的标签设计网站

我还在一个普通的html和css文件中尝试过

folder:
.images
.index.html
.styles.css

关于这个文件结构和普通的html css文件

background-image: url("images/Cover1.jpg");

作品但是app.vue one是有问题的。请告诉我该怎么做

这确实很尴尬,但问题是。。。

图像文件夹使用大写字母"strong";我"但我写了

"~@/components/images/Cover1.jpg"

而不是

"~@/components/Images/Cover1.jpg"

所以它没有加载图像,尽管奇怪的是它没有给出任何错误

这真是一件让人恐慌的傻事。。。至少我为社区做出了贡献

实际上在vue静态文件应该在资产文件夹中

background-image: url("~@/assets/images/Cover1.jpg");

仍然为您的情况尝试此路径

background-image: url("~@/components/images/Cover1.jpg"); 

*注意起始处的波浪形~

最新更新