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

Posted 2023-02-22

【中文标题】无法使用 html 加载图像。仅适用于 CSS

【英文标题】：Cant load image with html. only works in css

【发布时间】：2017-05-05 04:12:28

【问题描述】：

我的 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

【问题讨论】：

图片的正确路径（位置）是什么？ （相对于您的root 目录）

@Dekel 背景：url('../assets/Trump.png');效果很好。所以我认为路径是正确的。当我在样式标签中执行此操作时，它会停止工作

看起来应该是url('assets/Trump.png')

Think 不是我问题的答案（你已经说过它在 css 中有效）。这正是我问什么是正确路径的原因。

你的html页面的url是什么？ html文件和css文件的路径是什么。另外，您如何在工作 html 中包含 css 文件？

【参考方案1】：

去掉url()中的撇号，url()函数不需要它们

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

【讨论】：

@BillCriswell 立即认出了你的名字。在 Vue gitter 中经常见到你。感谢您的链接将检查它

【参考方案2】：

将您的图片网址编辑为此

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

当您在 css 中声明此背景属性时，url 是正确的，资产文件夹位于 css 的父目录中。但是当使用内联 css 时，资产和 html 文件位于同一目录中，这就是您收到此错误的原因。

【讨论】：

仍然出现错误。甚至在没有撇号的情况下尝试过。

它是通过你的css加载的

【参考方案3】：

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

【讨论】：

这不是答案

是的，你必须尝试一些事情。我们都不知道你的目录是什么样的，所以在你说得更具体之前，这对你来说已经是最好的了。

我的意思是这不是问题的答案。这是关于如何解决问题的评论。你应该等到你有足够的权限来评论问题。

而且您确实有足够的声誉来提供答案，但这不是答案。你应该阅读***的FAQ

这是一个答案；）我已经做到了。不过，您可能应该对其进行审查。这个网站是为了帮助他人。

【参考方案4】：

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

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

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

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

然而 - 如果我们在/ 目录中（page.html 所在的位置），这也是我们的root 目录，当我们尝试转到../assets/Trump.png 时我们得到的路径是/assets/Trump.png（我们的服务器中确实不存在。正确的路径应该是/static/assets/Trump.png）。

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

【讨论】：

@Kiff Powers 关键在于 css 文件中的 PATH 和 html 中的 URL，您应该了解它们的不同。

path 和 url 都是相对的，问题与什么/在哪里有关。 css 内的图像相对于css 文件的路径，html 页面内的图像相对于html 文件的位置。

@Dekel 我已经读过了。我在 Vue 组件中工作。所以css和html在同一个文件中。我认为我的问题与 webpack 有关。谢谢你的帮助

你确定css和html在同一个文件里吗？