Chrome 报告图像的“无效属性值”答案

【问题标题】：Chrome reports 'Invalid Property Value' for imageChrome 报告图像的“无效属性值”
【发布时间】：2019-05-16 04:04:14
【问题描述】：

在一个 HTML 文档中，我写了一个基本的图像类

<div class = "upper-img"></div>

在我的 CSS 文件中，类被简单地定义为

.upper-img {
    width: 360px;
    height: 250px;
    background: url(C:\siteImages\alaskanMountains.jpg);
}

我已确保路径正确，并且图像确实在 HTML 标记中正确显示。但是，我收到一个 chrome 浏览器错误，提示“属性值无效。这是一张供参考的图片：

我在 StackOverflow 上看到了几个非常相似的问题，但所有这些问题似乎都可以通过更改背景元素的属性来解决。

例如，通过更改解决了其他几个问题

background-image: url("file")

到

background: url("file")

这显然对我不起作用，有什么想法吗？

【问题讨论】：

【解决方案1】：

首先，建议在将类分配给 HTML 对象时避免使用空格，即：

<div class = "upper-img"></div>

应该是：

<div class="upper-img"></div>

对于背景，您必须使用图像的相对路径。如果图像位于内联 css 的同一文件夹中，则可以调用该图像。如果它位于不同的文件夹中，您需要使用以下命令进行导航：

../ 返回上一级文件夹。 / 更进一步的文件夹级别。

IE：

background: url(../img/alaskanMountains.jpg);

【讨论】：

在哪里建议在属性声明中留出空格？添加空格当然是非常规的，但我从未听说有人建议有意识地避免它们。
它属于编程的最佳实践。对于 HTML，我强烈推荐这篇文章：webfx.com/blog/web-design/…
我能看到的关于留出空格的唯一一点是缩小，这是另一回事。不喜欢那篇文章，因为它在适用于 HTML5 的最佳实践和那些与 XHTML 1.0 相关但与 HTML5 无关的最佳实践之间来回切换。例如 #4 似乎是在 HTML5 之前的时代编写的，但 #10 继续讨论如何避免在 HTML5 中使用 div。 #12 也是为 XHTML 编写的——因为 the W3C HTML specification doesn't require all tags be closed, only the W3C XHTML spec does.
没有反对最佳实践的文章（大约三分之二的东西仍然相关），但是那个特别的文章充其量是过时的（主要是为 XHTML 1.0 编写的）并且不一致/在最坏的情况下自相矛盾。
我最终将图片移动到了我的 CSS 文件夹中，并且成功了！非常感谢，很高兴知道。

【解决方案2】：

background 规则中的斜线应该是向前的，而不是向后的。此外，请确保不要在属性、等号和属性值之间留有空格：

<div class="upper-img"></div>

【讨论】：