\
**Category:** Development\
**Created:** [2026年三月17日 01:13 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578 "2026-03-17T01:13:15Z")\
**Posts on this page:** 7\
**Page:** 1
**Author:**  [@das-g](https://meta.discourse.org/u/das-g)\
**Post date:** [2026年三月17日 01:13 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/1 "2026-03-17T01:13:15Z")
[Include assets (e.g. images, fonts) in themes and components](https://meta.discourse.org/t/include-assets-e-g-images-fonts-in-themes-and-components/62459#p-287271-html-7) 似乎仍然是指 Handlebars 的做法，如果我理解正确的话。新的 Glimmer 方式是否已经可以用于获取主题组件的 `assets` 目录中的图片，使其在同一主题组件的 HTML（模板）中可用？
我的用例是替换 [https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553?u=das-g](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553?u=das-g) 中描述的现已损坏的旧版主题组件。
> **我尝试过的方法**
>
> 我使用 `discourse_theme new discourse-tc-geowebforum-sponsors` 生成了一个新的主题组件项目，然后尝试[复制以前的插件，但移除了条件逻辑并使用了内联模板](https://gitlab.com/geowebforum/discourse-tc-geowebforum-sponsors/-/commit/ae47578d79cf3b2aac453e403976db767d699219)，但这导致了
>
> ```plaintext
> [THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url:
>
> ```
>
> 在浏览器控制台中出现错误。
>
> 我还尝试了各种组合：
>
> - 将模板提取到常量中
> - 使用单花括号（而不是双花括号）
> - 在花括号内使用函数调用 (`themeRelativeUrl("asseco_berit.jpg")`)
> - 将模板移动到 `javascripts/discourse/components/geowebforum-sponsors.gjs`（并从初始化器中导入它）
> - 将模板移动到 `javascripts/components/geowebforum-sponsors.gjs`（并从初始化器中导入它）
> - 在该文件中引入一个 `class GEOWebforumSponsorsComponent extends Component {}` 并在初始化器中导入它（同时从同一文件以 `template` 名称导出模板，这是某个 LLM 向我建议的——我仍然不确定这是否有意义。）
>
> 我遇到的结果是：
>
> - 相同的错误（尽管来自另一个文件）
> 或
> - `klass is not an Ember component`
> 或
> - 结果 DOM 中出现字面模板占位符，自然导致图片源出现 404 错误
---
**Author:**  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2026年三月17日 02:21 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/2 "2026-03-17T02:21:05Z")
嗯，你看到这部分了吗？
> [@Discourse](#):
>
> ### 将主题上传作为设置进行访问
>
> 您也可以在 JavaScript 中将 `theme_uploads` 视为设置（[相关提交](https://github.com/discourse/discourse/commit/719a93c312b9caa6c71de22d67f1ce1a78c1c8b2)）。
>
> 这允许主题和组件访问主题资产。
>
> 在主题 JS 内部，您现在可以使用以下方式获取资产的 URL：
>
> ```plaintext
> settings.theme_uploads.name
>
> ```
---
**Author:**  [@das-g](https://meta.discourse.org/u/das-g)\
**Post date:** [2026年三月17日 11:24 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/3 "2026-03-17T11:24:42Z")
如果我将它们放入主题组件源代码项目的 `assets` 目录中，这算作“上传”吗？
---
**Author:**  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2026年三月17日 11:25 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/4 "2026-03-17T11:25:55Z")
可以。你可以将它们直接放在 `assets/` 目录中。
---
**Author:**  [@das-g](https://meta.discourse.org/u/das-g)\
**Post date:** [2026年三月17日 15:15 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/5 "2026-03-17T15:15:01Z")
在这里的提示以及[ask.discourse.com 机器人的一些帮助](https://ask.discourse.com/discourse-ai/ai-bot/shared-ai-conversations/iRRje4DGSzerXYzMUoqxWQ)下，我设法让它运行起来了：
- 这是在 `discourse_theme` 命令行工具生成的基础上做的[相关提交](https://gitlab.com/geowebforum/discourse-tc-geowebforum-sponsors/-/commit/75e73bdaf277389f51037245d1edc350404d3313)。
- 这是我先前在顶帖中提到的不成功尝试与当前版本的[差异](https://gitlab.com/geowebforum/discourse-tc-geowebforum-sponsors/-/compare/ae47578d79cf3b2aac453e403976db767d699219..75e73bdaf277389f51037245d1edc350404d3313?from_project_id=80325622)。
谢谢你，@NateDhaliwal！
### 在此过程中我遇到的关键问题：
- 在模板中，任意的 JavaScript 表达式（如函数调用）或过滤器表达式（形式为 `some-transormation-function someVariableOrLiteral`）在双花括号内都无效。只有单个变量可以被插值进去。
- 对于两个资源之一，我忘记在 `about.json` 中对应的文件路径值中包含目录名 `assets/`。这会静默失败，导致相应的设置变为 `undefined`，我猜这使得整个模板被静默省略或发生了别的情况。
- 在开发过程中有一次，通过 `discourse_theme watch ...` 同步的主题组件在预览或明确激活时都没有效果。让 `discourse_theme watch ...` 在实例上创建一个组件的新副本（并删除先前存在的副本）解决了这个问题。不确定当时具体发生了什么。
---
**Author:**  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2026年三月18日 01:37 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/6 "2026-03-18T01:37:06Z")
您检查过浏览器控制台了吗？组件中的错误会在那里报告，如果有错误，您的组件将不会显示（或完全不显示）。
---
**Author:**  [@system](https://meta.discourse.org/u/system)\
**Post date:** [2026年四月17日 01:37 UTC](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578/7 "2026-04-17T01:37:13Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.