Fixed loading assets from CDN URL

refs https://ghost.slack.com/archives/C027S85FS/p1690202522054729

- this is another set of places where we load assets slightly
  differently
- this should fix user profile images when using assets from a CDN

ghost/admin/app/components/modal-post-history.js

@@ -55,7 +55,7 @@ export default class ModalPostHistory extends Component {
                 feature_image_caption: revision.get('featureImageCaption'),
                 author: {
                     name: revision.get('author.name') || 'Deleted staff user',
-                    profile_image_url: revision.get('author.profileImage') || this.ghostPaths.assetRoot.replace(/\/$/, '') + '/img/user-image.png'
+                    profile_image_url: revision.get('author.profileImageUrl')
                 },
                 postStatus: revision.get('postStatus'),
                 reason: revision.get('reason'),

ghost/admin/app/components/modals/newsletters/edit/preview-labs.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import config from 'ghost-admin/config/environment';
 import moment from 'moment-timezone';
 import {htmlSafe} from '@ember/template';
 import {inject as service} from '@ember/service';
@@ -119,7 +120,7 @@ export default class EditNewsletterPreview extends Component {
     get featureImageUrl() {
         // keep path separate so asset rewriting correctly picks it up
         const imagePath = '/img/user-cover.png';
-        const fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath;
+        const fullPath = (config.cdnUrl ? '' : this.ghostPaths.assetRoot.replace(/\/$/, '')) + imagePath;
         return fullPath;
     }
 

ghost/admin/app/components/modals/newsletters/edit/preview.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import config from 'ghost-admin/config/environment';
 import moment from 'moment-timezone';
 import {htmlSafe} from '@ember/template';
 import {inject as service} from '@ember/service';
@@ -43,7 +44,7 @@ export default class EditNewsletterPreview extends Component {
     get featureImageUrl() {
         // keep path separate so asset rewriting correctly picks it up
         const imagePath = '/img/user-cover.png';
-        const fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath;
+        const fullPath = (config.cdnUrl ? '' : this.ghostPaths.assetRoot.replace(/\/$/, '')) + imagePath;
         return fullPath;
     }
 

ghost/admin/app/helpers/parse-history-event.js

@@ -1,4 +1,5 @@
 import Helper from '@ember/component/helper';
+import config from 'ghost-admin/config/environment';
 import {inject as service} from '@ember/service';
 
 export default class ParseHistoryEvent extends Helper {
@@ -13,7 +14,7 @@ export default class ParseHistoryEvent extends Helper {
         const actor = getActor(ev);
         const actorLinkTarget = getActorLinkTarget(ev);
 
-        const assetRoot = this.ghostPaths.assetRoot.replace(/\/$/, '');
+        const assetRoot = (config.cdnUrl ? '' : this.ghostPaths.assetRoot.replace(/\/$/, ''));
         const actorIcon = getActorIcon(ev, assetRoot);
 
         return {
@@ -39,14 +40,11 @@ function getActor(ev) {
 }
 
 function getActorIcon(ev, assetRoot) {
-    const defaultImage = `${assetRoot}/img/user-image.png`;
+    const defaultImage = `/img/user-image.png`;
+    let defaultImageUrl = `${assetRoot}${defaultImage}`;
 
-    if (!ev.actor.id) {
-        return defaultImage;
-    }
-
-    if (!ev.actor.image) {
-        return defaultImage;
+    if (!ev.actor.id || !ev.actor.image) {
+        return defaultImageUrl;
     }
 
     return ev.actor.image;

ghost/admin/app/models/user.js

@@ -1,6 +1,7 @@
 /* eslint-disable camelcase */
 import BaseModel from './base';
 import ValidationEngine from 'ghost-admin/mixins/validation-engine';
+import config from 'ghost-admin/config/environment';
 import {attr, hasMany} from '@ember-data/model';
 import {computed} from '@ember/object';
 import {equal, or} from '@ember/object/computed';
@@ -89,14 +90,14 @@ export default BaseModel.extend(ValidationEngine, {
     profileImageUrl: computed('ghostPaths.assetRoot', 'profileImage', function () {
         // keep path separate so asset rewriting correctly picks it up
         let defaultImage = '/img/user-image.png';
-        let defaultPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + defaultImage;
+        let defaultPath = (config.cdnUrl ? '' : this.ghostPaths.assetRoot.replace(/\/$/, '')) + defaultImage;
         return this.profileImage || defaultPath;
     }),
 
     coverImageUrl: computed('ghostPaths.assetRoot', 'coverImage', function () {
         // keep path separate so asset rewriting correctly picks it up
         let defaultImage = '/img/user-cover.png';
-        let defaultPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + defaultImage;
+        let defaultPath = (config.cdnUrl ? '' : this.ghostPaths.assetRoot.replace(/\/$/, '')) + defaultImage;
         return this.coverImage || defaultPath;
     }),
 

ghost/admin/app/utils/ghost-paths.js

@@ -20,10 +20,6 @@ export default function () {
     let assetRoot = `${subdir}/ghost/assets/`;
     let apiRoot = `${subdir}/ghost/api/admin`;
 
-    function assetUrl(src) {
-        return subdir + src;
-    }
-
     return {
         adminRoot,
         assetRoot,
@@ -48,9 +44,7 @@ export default function () {
                     return arg.slice(-1) === '/' ? arg : `${arg}/`;
                 }
                 return '/';
-            },
-
-            asset: assetUrl
+            }
         }
     };
 }