如何从 SASS 中的外部文件夹加载图像作为背景图像？答案

【问题标题】：How can I load the image from external folder in SASS as a background image?如何从 SASS 中的外部文件夹加载图像作为背景图像？
【发布时间】：2021-01-16 07:55:22
【问题描述】：

我有一个场景，我的所有图像都将从第三方云库而不是我的本地根文件夹加载，有什么方法可以在 SASS 中配置该路径并将它们设置为背景图像的 URL？

这是我目前拥有的： $placeholder-image: url('../../img/test.png');

但是 img 文件夹在它给定的路径中不可用，它应该仍然能够加载图像。有人可以帮忙吗？

【问题讨论】：

标签： javascript html jquery sass

【解决方案1】：

我不确定是否要重写您的相对路径 - 这需要某种 SCSS 解析器插件。如果您可以控制样式表，可能会付出更多的努力。

更简单地说，您可以设置一个变量，该变量是您的图像从何处提供的 URL，然后将其插入到图像的路径中，所有这些都在一个函数中方便起见。

像这样：

$bg-image-url: 'https://image-server.com/';

@function bgImageUrl($path) {
  @return url('#{$bg-image-url}#{$path}');
}

.element {
  background-image: bgImageUrl('test.png');
}

编译为：

.element {
  background-image: url("https://image-server.com/test.png");
}

【讨论】：

您好，感谢您的回复。在我的情况下 $bg-image-url 路径，需要从 JSON 加载，我尝试在 SASS 中编写该函数，但似乎不支持，请告诉我是否有任何方法可以做到这一点？