Image preview fixed.

frontend/app/features/content/shared/list/content-value.component.html

@@ -1,6 +1,8 @@
 <ng-container *ngIf="isPlain; else html">
+    <span>
         <span class="truncate">{{value}}</span>
+    </span>
 </ng-container>
 <ng-template #html>
-    <span class="html-value" [innerHTML]="value.html"></span> &nbsp;
+    <span [outerHTML]="value.html"></span>
 </ng-template>

frontend/app/features/content/shared/list/content-value.component.scss

@@ -1,10 +1,13 @@
+:host {
+    position: relative;
+}
+
 :host ::ng-deep {
-    .html-value {
     img {
-            margin-top: -15px;
         max-height: 50px;
         min-height: 50px;
         position: absolute;
+        top: -15px;
     }
 
     img + span {
@@ -14,9 +17,4 @@
     span {
         @include truncate;
     }
-    }
-}
-
-.html-value {
-    position: relative;
 }

frontend/app/shared/state/contents.forms.spec.ts

@@ -422,7 +422,7 @@ describe('StringField', () => {
     it('should format to preview image', () => {
         const field2 = createField({ properties: createProperties('String', { editor: 'StockPhoto' }) });
 
-        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" />'));
+        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" /> &nbsp;'));
     });
 
     it('should not format to preview image when html not allowed', () => {
@@ -463,7 +463,7 @@ describe('GetContentValue', () => {
 
         const result = getContentValue(content, language, assetWithImageAndFileName);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13</span>') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13 &nbsp;</span>') });
     });
 
     it('should resolve image url only from referenced asset', () => {
@@ -479,7 +479,7 @@ describe('GetContentValue', () => {
 
         const result = getContentValue(content, language, assetWithImage);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" />') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> &nbsp;') });
     });
 
     it('should resolve filename only from referenced asset', () => {

frontend/app/shared/state/contents.forms.visitors.ts

@@ -55,9 +55,9 @@ export function getContentValue(content: ContentDto, language: LanguageDto, fiel
                         const previewMode = field.properties['previewMode'];
 
                         if (previewMode === 'ImageAndFileName') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]}</span>`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]} &nbsp;</span>`);
                         } else if (previewMode === 'Image') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" />`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> &nbsp;`);
                         } else {
                             formatted = value[1];
                         }
@@ -181,7 +181,7 @@ export class FieldFormatter implements FieldPropertiesVisitor<FieldValue> {
             const src = thumbnail(this.value, undefined, 50);
 
             if (src) {
-                return new HtmlValue(`<img src="${src}" />`);
+                return new HtmlValue(`<img src="${src}" /> &nbsp;`);
             }
         }