# 如何在设置中按名称引用图片？
**URL:** https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260
**Category:** Development
**Created:** [2023年十二月11日 16:39 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260 "2023-12-11T16:39:06Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [2023年十二月11日 16:39 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/1 "2023-12-11T16:39:06Z")
在主题组件中，它会在屏幕上显示一个图像（帽子）
要直接在 SCSS 中使用图像，它会像这样使用其资源名称，
这些图像在 about.json 中定义
```plaintext
{
"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 中使用这些图像，如果直接使用资源名称，效果很好，如下所示
```plaintext
background: transparent url($red-hat1) top left no-repeat;
```
我想添加一个设置来选择图像。
在 settings.yml 中，我有这个，用于选择一个帽子图像显示在屏幕上
```plaintext
hat_type:
default: red-hat1
type: enum
choices:
- red-hat1
- red-hat2
- squirrel2
```
我可以在 SCSS 中使用 if else 来使用图像，但这可能会太长……
```plaintext
@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 中使用一个函数
```plaintext
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`
有人能给点提示吗，非常感谢 🙂 …
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十二月11日 17:34 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/2 "2023-12-11T17:34:06Z")
我相信你可以直接使用插值来设置。
`background: transparent URL(\"$#{$hat_type}\") top left no-repeat;`
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [2023年十二月11日 22:04 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/3 "2023-12-11T22:04:43Z")
谢谢 Arkshine。
使用此语法，我在设置中为 hat\_type 选择 squirrel2。
```plaintext
background: transparent url("$#{$hat_type}") top left no-repeat;
```
在网页上，检查了样式，它被转换成了这个……
猜测
在 url() 函数内部，它需要一个变量 squirrel2， 而 “#{$hat\_type}” 会得到一个字符串 $squirrel2……？
* * *
我试过这个
```plaintext
background: transparent url("assets/decorations/#{$decoration_image}.png") top left no-repeat;
```
它渲染成了这个，还是不对
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [2023年十二月11日 22:18 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/4 "2023-12-11T22:18:48Z")
尝试在 assets 路径的开头添加一个 `/`。
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [2023年十二月11日 22:21 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/5 "2023-12-11T22:21:34Z")
谢谢 @Firepup650
试着在 assets 前加了 /，但也不行，它在中间加了个 /
但它没有转换成真实的 url，应该是这样的
`https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png`
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十二月11日 23:02 UTC](https://meta.discourse.org/t/how-to-reference-to-an-image-by-name-specified-in-setting/288260/6 "2023-12-11T23:02:24Z")
你说得对；我以为它在我这边能用，但猜想不行。 🤔
这里有一个替代方案：通过 js 设置自定义 CSS 属性。
```js
document.documentElement.style.setProperty(
"--hat-url",
`url(${settings.theme_uploads[settings.hat_type]}`
);
```
```css
body {
background: var(--hat-url);
}
```
`settings.theme_uploads` 将包含您的上传列表。
例如：
然后，根据您的设置，您将设置自定义属性。
请注意，根据我的测试，这样做 `url(var(--hat-url))` 是行不通的，这就是为什么我直接在自定义属性中传递 `url()`。