如何在 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 错误
2 个赞
Templating of my "component" broke. How do I fix it?
2

嗯，你看到这部分了吗？

1 个赞
3

如果我将它们放入主题组件源代码项目的 assets 目录中，这算作“上传”吗？

4

可以。你可以将它们直接放在 assets/ 目录中。

1 个赞
5

在这里的提示以及ask.discourse.com 机器人的一些帮助下，我设法让它运行起来了：

  • 这是在 discourse_theme 命令行工具生成的基础上做的相关提交。
  • 这是我先前在顶帖中提到的不成功尝试与当前版本的差异。

谢谢你，@NateDhaliwal！

在此过程中我遇到的关键问题：

  • 在模板中，任意的 JavaScript 表达式（如函数调用）或过滤器表达式（形式为 some-transormation-function someVariableOrLiteral）在双花括号内都无效。只有单个变量可以被插值进去。
  • 对于两个资源之一，我忘记在 about.json 中对应的文件路径值中包含目录名 assets/。这会静默失败，导致相应的设置变为 undefined，我猜这使得整个模板被静默省略或发生了别的情况。
  • 在开发过程中有一次，通过 discourse_theme watch ... 同步的主题组件在预览或明确激活时都没有效果。让 discourse_theme watch ... 在实例上创建一个组件的新副本（并删除先前存在的副本）解决了这个问题。不确定当时具体发生了什么。
6

您检查过浏览器控制台了吗？组件中的错误会在那里报告，如果有错误，您的组件将不会显示（或完全不显示）。