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

Posted 2023-02-22

【中文标题】我在 vue js 样式标签中加载背景图像时遇到问题 [关闭]

【英文标题】：I have a problem loading background-image in vue js's style tag [closed]

【发布时间】：2021-04-04 18:19:58

【问题描述】：

我尝试了我的 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 一个是有问题的。 请告诉我该怎么做

【参考方案1】：

实际上vue中的静态文件应该在assets文件夹中

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

仍然为你的情况尝试这条路

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

*注意开头的 tilda ~ 键

【参考方案2】：

这真的很尴尬，但问题是这样的......

图像文件夹是大写的“I”，但我写了

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

而不是

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

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

这是一件令人恐慌的傻事……至少我为社区做出了贡献-.-

【讨论】：

@BoussadjraBrahim 只是一个小问题：如果告诉 OPs 删除他们的问题，如果它是由拼写错误引起的，或者是不可重现的，这是一个很好的建议，但这样做不是一个好主意之后 接收答案。即使这是一个错字，该用户已经付出了一些努力来编写答案，并且需要考虑到这一点。