diff --git a/app/assets/javascripts/discourse/app/components/cdn-img.gjs b/app/assets/javascripts/discourse/app/components/cdn-img.gjs
new file mode 100644
index 00000000000..9a1efcc3871
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/cdn-img.gjs
@@ -0,0 +1,28 @@
+import Component from "@glimmer/component";
+import { htmlSafe } from "@ember/template";
+import { getURLWithCDN } from "discourse-common/lib/get-url";
+
+export default class CdnImg extends Component {
+ get cdnSrc() {
+ return getURLWithCDN(this.args.src);
+ }
+
+ get style() {
+ if (this.args.width && this.args.height) {
+ return htmlSafe(`--aspect-ratio: ${this.args.width / this.args.height};`);
+ }
+ }
+
+
+ {{#if @src}}
+
+ {{/if}}
+
+}
diff --git a/app/assets/javascripts/discourse/app/components/cdn-img.hbs b/app/assets/javascripts/discourse/app/components/cdn-img.hbs
deleted file mode 100644
index 9448ded6abc..00000000000
--- a/app/assets/javascripts/discourse/app/components/cdn-img.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{#if this.src}}
-
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/cdn-img.js b/app/assets/javascripts/discourse/app/components/cdn-img.js
deleted file mode 100644
index 01daabb6f45..00000000000
--- a/app/assets/javascripts/discourse/app/components/cdn-img.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Component from "@ember/component";
-import { htmlSafe } from "@ember/template";
-import { getURLWithCDN } from "discourse-common/lib/get-url";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Component.extend({
- tagName: "",
-
- @discourseComputed("src")
- cdnSrc(src) {
- return getURLWithCDN(src);
- },
-
- @discourseComputed("width", "height")
- style(width, height) {
- if (width && height) {
- return htmlSafe(`--aspect-ratio: ${width / height};`);
- }
- },
-});