图像已加载但未显示在 Firefox 上的本地主机应用程序中

Question

我已经用谷歌搜索了这个问题，找到了几个答案。他们中的大多数人建议清理缓存和 cookie，我这样做了，但没有用。

我想在我的应用程序中显示图像。当我检查 Firefox 中的开发人员设置时，我的图像已加载，但未显示。它还说，它的内容是 0x20，即使我将宽度和高度设置为 100px 和 80px。我什至尝试使用 !important 语句，但它仍然显示 0x20。

在 Google Chrome 中完全可以正常工作，但在 Firefox 中却不行。

这个问题实际上看起来很容易解决，但我真的不知道为什么它不起作用，我尝试了很多选项，但其中 none 似乎有效。

有什么想法吗？

编辑

html

<i class="icon"></i>

css

.icon {
     width: 100px;
     height: 80px;
     content: url(../imgs/icon.png);
 }

Answer 1

您尝试向某个元素添加 content。

content 仅受 :before 和 :after 支持。参见 W3C。

而 <i> 是一个 inline 元素，通过 css 给它 width/height 添加它作为 inline-block.

将您的 CSS 更改为以下应该有效，也许添加 display: inline-block;

.icon:before {
    width: 100px;
    height: 80px;
    content: url(../imgs/icon.png);
}

这将改变之前的尺寸，只有在使用响应式 SVG 时图像尺寸才会改变。

我更喜欢使用 background 方法：

HTML:

<i class="icon"></i>

CSS:

.icon {
    display: inline-block;
    width: 100px;
    height: 80px;
}
.icon:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: url(//via.placeholder.com/150x75) no-repeat;
    background-size: contain;
}

这将根据容器大小更改图像。 background-size: contain 的比例被保留。使用 before.

时需要 content

Try out.

图像已加载但未显示在 Firefox 上的本地主机应用程序中

Image is loaded but not showing in localhost application on firefox

html

css

firefox

image

show