Question

我的css包含一个类

.Img{
  background: url('../assets/Trump.png');
}

html看起来像这样：

<div class="Img">

但是当我想要这样的时候

<div class="Img" style="background: url('../assets/Trump.png');">

图片不会为我加载而我收到错误

>GET http://localhost:8080/assets/Trump.png 404 (Not Found)

我正在使用vue.js 2.0和webpack

Answer 1

这里的主要问题是相对路径。

如果你有这样的结构，例如：

/page.html
/static/
       /assets/
              /Trump.png
       /css/
           /file.css

在您的page.html内，您的css（<link>）有static/assets/css/file.css个标记，来自的../assets/Trump.png 对该css的调用文件将到达正确的位置（因为从/css目录 - 1目录是static目录，从那里我们进入assets并且一切正常。

然而 - 如果我们在/目录（page.html存在的位置）内，这也是我们的root目录，当我们尝试去至../assets/Trump.png我们获得的相对路径为/assets/Trump.png（我们的服务器中存在不。正确的路径应为/static/assets/Trump.png）。

您应该检查目录的结构并输入正确的相对路径。

Answer 2

删除url()中的撇号，url()函数不需要它们

<div class="Img" style="background: url(../assets/Trump.png);">

Answer 3

将您的图片网址编辑为此

<div class="Img" style="background-image: url('assets/Trump.png');">

当你在css中声明这个background-property时，url是正确的，assets文件夹位于css的父目录中。但是当使用内联css时，资产和html文件位于同一目录中，这就是你收到此错误的原因。

Answer 4

检查您的图片路径，这可能是问题所在。看看这个：CSS background image URL path

无法用html加载图片。只适用于CSS

4 个答案: