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

Question

我在我的 vue 应用程序中尝试了所有方法，但即使我有 .html 文件来处理它，我也无法让我的 app.vue 文件加载背景图像。我已经尝试了互联网上的所有内容，但没有成功。让我们直奔问题吧。

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

此代码不执行任何操作

我什至添加了背景颜色并且它起作用了。除图像外的所有内容都显示出来。所以我认为这是因为路径。我尝试了从 ~@/components/images/Cover1.jpg 到 /components/images/Cover1.jpg 的所有方法，即使我使用 /components/images/Cover1.jpg 和 /@/components/images/Cover1.jpg vue js 也没有'给我一个错误。

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

（2 个错误是因为 vetur 错误，与标签无关）我正在根据 app.vue 的标签

设计网站样式

我也在普通的 html 和 css 文件中尝试过

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

在这个文件结构上和正常html css文件

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

有效但是 app.vue 一个是有问题的。请告诉我该怎么做

Answer 1

其实在vue中静态文件应该在assets文件夹下

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

仍然适合你的情况，试试这个路径

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

*注意开头的 ~ 键

Answer 2

这确实很尴尬，但问题是这样...

图片文件夹是大写 "I" 但我写了

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

而不是

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

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

恐慌是一件愚蠢的事情......至少我为社区做出了贡献-.-

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

I have a problem loading background-image in vue js's style tag

html

javascript

css

vue.js

vuejs3