svg 图像未显示在 Firefox、Chrome 中答案

【问题标题】：svg image not showing up in firefox, chromesvg 图像未显示在 Firefox、Chrome 中
【发布时间】：2021-12-24 19:28:46
【问题描述】：

我有一个 HTML 代码，当它是一个实时服务器 (localhost) 时，我可以看到 .svg 图像。在 Firefox 或 chrome 中打开文件后，我看不到图像。

.status {
  text-align: center;
  max-width: 25rem;
  margin: 0 auto;
}

.rating {
  padding: 0.5rem;
  background-color: var(--light-grayish-magenta);
  font-weight: 800;
  color: var(--very-dark-magenta);
  border-radius: 7px;
}

.rating::before {
  content: '';
  width: 6.25rem;
  height: 1rem;
  margin: 0 auto;
  display: block;
  background-image: url(../images/icon-star.svg);
  margin-bottom: 1rem;
  background-repeat: space;
}

<div class="status flow-content">
  <div class="rating">Rated 5 Stars in Report Guru</div>
  <div class="rating">Rated 5 Stars in Reviews</div>
  <div class="rating">Rated 5 Stars in BestTech</div>
</div>

【问题讨论】：

检查您的浏览器控制台，可能 img 路径不正确
控制台有所有答案，也许你没有把正确的路径或什么...
这能回答你的问题吗？ How to give the background-image path in CSS?
我现在确实检查了控制台，它确实说它无法加载文件.. 我尝试了 img 路径，没有工作。我会尝试其他一些选项，看看会发生什么。谢谢或建议

标签： html css image google-chrome firefox

【解决方案1】：

如果您将路径用单引号括起来，它应该可以工作

background-image: url('../images/icon-star.svg');

或者不带引号试试

background-image: url(icon-star.svg);

【讨论】：