时间戳

首页 > 解决方案 > 我在 vue js 的样式标签中加载背景图像时遇到问题

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

问题描述

我在我的 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 不会给我一个错误。

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

（2 个错误是由于 vetur 错误，未与标签链接）我正在使用 app.vue 的标签设计网站样式

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

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

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

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

工作，但 app.vue 之一是有问题的。请告诉我该怎么办

标签： javascripthtmlcssvue.jsvuejs3

解决方案

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

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

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

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

*注意开头的 tilda~键

推荐阅读