html - 无法将背景图像加载到 html/css 中的 div

Question

我一直有这个问题一段时间了。我正在使用 reactjs 并尝试将背景图像添加到 div 标签

<div className="ficon"></div>

在我的css文件中

  .ficon {
    max-width: 100px;
    max-height:100px;
    background-image: url('/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png');
}

问题是它在 url 地址是 http 或来自互联网时有效，但在我的计算机中本地时无效。我尝试使用相对路径，但也没有用。它编译时没有任何错误或警告，只是不显示图像。我知道 url 是正确的，因为当我将它用作图像时它可以工作。

<img src="/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png"/>

提前致谢！

标签： htmlcssreactjs

Answer 1

您是否尝试过使用图像文件的相对路径？例如：

<img src="src/images/folder-icon (1).png" />

还可以考虑从文件名中删除空格。