使用 SCSS 动态添加块引用图像答案

【问题标题】：Add blockquote image dynamically using SCSS使用 SCSS 动态添加块引用图像
【发布时间】：2018-06-07 16:59:39
【问题描述】：

您能告诉我如何使用SCSS 动态添加blockquote 图像吗？

注意：

我在这条路径上有svg 图像：assets/icon/left-quote.svg

这是我需要的。

在这里你可以看到它来自后端（即blockquote标签）。

【问题讨论】：

标签： html css sass ionic3

【解决方案1】：

您可以按如下方式使用::before 伪选择器：

blockquote {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: darkblue;
}

blockquote::before {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 1em auto;
  content: url("https://upload.wikimedia.org/wikipedia/commons/2/25/Quote_left_font_awesome.svg");
}

<blockquote>
  Parties prenantes de cette organisation (marchande ou non-marchande) par rapport aux attentes et besoins
</blockquote>

让它更像 SCSS：

blockquote {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: darkblue;

  &::before {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 1em auto;
    content: url("https://upload.wikimedia.org/wikipedia/commons/2/25/Quote_left_font_awesome.svg");
  }
}

【讨论】：

当我使用 url 时它正在工作。但这不起作用。你知道为什么吗？ content: url('./assets/icon/left-quote.svg');
你能告诉我如何使用项目文件来加载它，就像'./assets/icon/left-quote.svg'一样吗？
我不知道你的项目是如何构建的，什么被打包在哪里，你从什么位置引用。如果一切都失败了，base64 编码 SVG 并使用数据 URI。
构建后在www文件夹中。我通常对所有images、SVGs 等www\assets\icon\left-quote.svg 使用上述类型的URL。有什么线索吗？
这是我应用您的解决方案时的样子。你能看出那里有什么问题吗？ i.imgur.com/ezkhgQl.png