如何在 Glimmer 主题组件的 HTML 中使用来自 assets 的图片？

开发
1

Include assets (e.g. images, fonts) in themes and components 似乎仍然是指 Handlebars 的做法，如果我理解正确的话。新的 Glimmer 方式是否已经可以用于获取主题组件的 assets 目录中的图片，使其在同一主题组件的 HTML（模板）中可用？

我的用例是替换 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 生成了一个新的主题组件项目，然后尝试复制以前的插件，但移除了条件逻辑并使用了内联模板，但这导致了

[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 错误
1 个赞
2

嗯，你看到这部分了吗？