diff --git a/resources/js/controllers/attach_controller.js b/resources/js/controllers/attach_controller.js
index 47362a6a7..1b8b566c8 100644
--- a/resources/js/controllers/attach_controller.js
+++ b/resources/js/controllers/attach_controller.js
@@ -185,12 +185,16 @@ export default class extends ApplicationController {
         preview.querySelectorAll('*').forEach(element => {
             preview.innerHTML = preview.innerHTML
                 .replace(/{id}/gi, attachment.id)
-                .replace(/{url}/gi, attachment.url)
                 .replace(/{original_name}/gi, attachment.original_name)
                 .replace(/{mime}/gi, attachment.mime)
                 .replace(/{name}/gi, this.nameValue);
         });
 
+        const attachImage = preview.querySelector('.attach-image');
+        if (attachImage) {
+            attachImage.src = attachment.url;
+        }
+
         if (replace !== null) {
             this.element.querySelector(`#attachment-${replace}`).outerHTML = pip.outerHTML;
             return;
diff --git a/resources/views/fields/attach.blade.php b/resources/views/fields/attach.blade.php
index 3c6f47596..b42a4b467 100644
--- a/resources/views/fields/attach.blade.php
+++ b/resources/views/fields/attach.blade.php
@@ -55,7 +55,10 @@ class="attach"
             <input type="hidden" name="{name}" value="{id}">
 
 
-            <img class="attach-image rounded border user-select-none overflow-hidden" src="{url}" title="{original_name}"/>
+            <img class="attach-image rounded border user-select-none overflow-hidden"
+                 alt="Attached Image"
+                 src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+                 title="{original_name}"/>
 
             {{--
                 <object class="attach-image rounded border user-select-none" border="0" data="{url}" type="{mime}" title="test"  load="lazy" controls allowfullscreen autoplay="false">