CSS 类中给出的图像 url 不起作用

Posted 2023-03-06

【中文标题】CSS 类中给出的图像 url 不起作用

【英文标题】：Image url given in CSS class is not working

【发布时间】：2021-01-11 15:35:18

【问题描述】：

我有一个带有图像 url 的 css 类，路径是正确的，因为在 Chrome 中的检查模式下我可以看到该类已加载图像，但在 <img /> 元素中图像未显示。仅当我将图像路径放在其src 属性中时它才有效。

在屏幕截图中，红色标记区域是我尝试使用该类但无法正常工作的位置，绿色标记区域是我将图像路径直接放入src 属性并使其工作的位置。

我在 CSS 中尝试了 background 和 background-image 属性，但没有一个起作用。现在我可以通过使用 src 属性而不是 css 类来解决它，但我的问题是为什么图像在使用 css 类传递时无法呈现？

【问题讨论】：

尝试使用绝对路径进行资产链接，即不要使用'../'

@dantheman。我明白了，但我不知道部署后服务器中的绝对路径是什么，因此我必须使用相对路径

【参考方案1】：

如果我是正确的，你在img 标签上使用background-image。这不是最佳实践，也不是此样式规则的目的。你可以使用div 而不是img 来代替background-image。

【讨论】：

谢谢，实际上我试图直接使用“背景图像”作为内联样式来查看它是否工作，因为使用类不是。我只是在测试它，如果你再看一遍，你可以看到样式被注释掉了。我只是在 Chrome 中使用开发工具来查看是否可以使用 css 来渲染该图像。

【参考方案2】：

在我看来，它工作正常。我们可以在背景中看到计算器图像。您的问题是您的 <img> 没有 src 属性（因此图标带有损坏的图像）。

【讨论】：

谢谢，其实我想用css类来渲染图片，所以我不需要src属性

如果您不打算使用src 属性，为什么首先使用<img>。 background-image 适用于任何元素。