in a theme component, which shows an image (hat) on screen to use an image in scss, it works with its asset name directly like this, these images are defined in about.json { "name": "christmas-decorations", "about_url": "", "license_url": "", "author": "", "assets": { "red-hat1": "a…

I believe you can use the setting directly using interpolation. background: transparent URL("$#{$hat_type}") top left no-repeat;

thanks Arkshine. with this syntax, I picked sequirrel2 for the hat_type in settings. background: transparent url("$#{$hat_type}") top left no-repeat; in the web page, checked the styles, it is converted into this… [image] guess inside the function url(), it needs to be a variable $squirrel2…

Try adding a / to the beginning of that assets path.

thanks @Firepup650 tried to add a / before assets, it does not fly either, it adds a / in the middle, but it does not convert it into the real url, should be something like https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

You’re right; I thought it worked on my side, but I guess not. :thinking: Here an alternative: setting a custom CSS property via js. document.documentElement.style.setProperty( "--hat-url", `url(${settings.theme_uploads[settings.hat_type]}` ); body { background: var(--hat-url); } settings.…

設定で指定された名前で画像を参照する方法

開発

Arkshine 2023 年 12 月 11 日午後 5:34 2

補間を使用して設定を直接使用できると思います。

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

トピック		返信	表示
Get the url from theme asset SCSS Development	1	605	2023 年 5 月 4 日
Load a SCSS image in <img> tag Development	1	672	2019 年 4 月 5 日
Assets only available to SCSS not JS Development	3	734	2021 年 12 月 16 日
Theme with variable width inside settings UX	5	1117	2022 年 4 月 13 日
Referencing Image SCSS variables in the JS of a Theme Component Support	1	880	2020 年 11 月 18 日

設定で指定された名前で画像を参照する方法

関連トピック