diff --git a/src/components/NoteImage/NoteImage.module.scss b/src/components/NoteImage/NoteImage.module.scss
index a4c9893..540870a 100644
--- a/src/components/NoteImage/NoteImage.module.scss
+++ b/src/components/NoteImage/NoteImage.module.scss
@@ -7,3 +7,10 @@
 .shortHeight {
   max-height: 680px;
 }
+
+.placeholderImage {
+  display: block;
+  width: 524px;
+  height: 680px;
+  background-color: var(--background-site);
+}
diff --git a/src/components/NoteImage/NoteImage.tsx b/src/components/NoteImage/NoteImage.tsx
index 6248759..f7a5a28 100644
--- a/src/components/NoteImage/NoteImage.tsx
+++ b/src/components/NoteImage/NoteImage.tsx
@@ -101,7 +101,10 @@ const NoteImage: Component<{
   })
 
   return (
-    <Show when={isImageLoaded()}>
+    <Show
+      when={isImageLoaded()}
+      fallback={<div class={styles.placeholderImage}></div>}
+    >
       <a
         class={`${props.class || ''} ${props.plainBorder ? '' : 'roundedImage'}`}
         href={src()}