html - 无法使用 html 加载图像。仅适用于 css

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 里面你有一个<link>标记到您的 css(在 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 )。

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