如何在设置中按名称引用图片？

开发
1

在主题组件中，它会在屏幕上显示一个图像（帽子）
要直接在 SCSS 中使用图像，它会像这样使用其资源名称，
这些图像在 about.json 中定义

{
  "name": "christmas-decorations",
  "about_url": "",
  "license_url": "",
  "author": "",
  "assets": {
    "red-hat1": "assets/decorations/red-hat1.png",
    "red-hat2": "assets/decorations/red-hat2.png",
    "squirrel2": "assets/decorations/squirrel2.png"
  }
}

要在 SCSS 中使用这些图像，如果直接使用资源名称，效果很好，如下所示

background: transparent url($red-hat1) top left no-repeat;

我想添加一个设置来选择图像。
在 settings.yml 中，我有这个，用于选择一个帽子图像显示在屏幕上

hat_type:
  default: red-hat1
  type: enum
  choices:
    - red-hat1
    - red-hat2
    - squirrel2

我可以在 SCSS 中使用 if else 来使用图像，但这可能会太长……

    @if $hat_type == "red-hat1" {
      background: url($red-hat1) no-repeat center;
    } @else if $hat_type == "red-hat2" {
      background: url($red-hat2) no-repeat center;
    } @else if $hat_type == "squirrel2" {
      background: url($squirrel2) no-repeat center;
    }

我尝试在 SCSS 中使用一个函数

 background: url(get_image($hat_type)) no-repeat center;

@function get_image($name) {
  @return "assets/decorations/" + $name + ".png"
}

但这会得到一个 url，如
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
这不起作用，它应该像这样解析……
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

有人能给点提示吗，非常感谢 :slight_smile: …

2

我相信你可以直接使用插值来设置。

background: transparent URL(\"$#{$hat_type}\") top left no-repeat;

3

谢谢 Arkshine。

使用此语法，我在设置中为 hat_type 选择 squirrel2。

background: transparent url("$#{$hat_type}") top left no-repeat;

在网页上，检查了样式，它被转换成了这个……

image
image624×214 22.3 KB

猜测
在 url() 函数内部，它需要一个变量 squirrel2， 而 “#{$hat_type}” 会得到一个字符串 $squirrel2……？

我试过这个

background: transparent url("assets/decorations/#{$decoration_image}.png") top left no-repeat;

它渲染成了这个，还是不对
image

4

尝试在 assets 路径的开头添加一个 /。

5

谢谢 @Firepup650
试着在 assets 前加了 /，但也不行，它在中间加了个 /
但它没有转换成真实的 url，应该是这样的
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

你说得对；我以为它在我这边能用，但猜想不行。 :thinking:

这里有一个替代方案：通过 js 设置自定义 CSS 属性。

document.documentElement.style.setProperty(
  "--hat-url",
  `url(${settings.theme_uploads[settings.hat_type]}`
);

body {
  background: var(--hat-url);
}

settings.theme_uploads 将包含您的上传列表。
例如：
image

然后，根据您的设置，您将设置自定义属性。

请注意，根据我的测试，这样做 url(var(--hat-url)) 是行不通的，这就是为什么我直接在自定义属性中传递 url()。

1 个赞