diff --git a/website/docs/usage/101/_named-entities.mdx b/website/docs/usage/101/_named-entities.mdx
index 1778ab0a9..f918e5bd6 100644
--- a/website/docs/usage/101/_named-entities.mdx
+++ b/website/docs/usage/101/_named-entities.mdx
@@ -32,11 +32,10 @@ for ent in doc.ents:
 Using spaCy's built-in [displaCy visualizer](/usage/visualizers), here's what
 our example sentence and its named entities look like:
 
-import DisplaCyEntHtml from 'images/displacy-ent1.html'
 import { Iframe } from 'components/embed'
 
 <Iframe
   title="displaCy visualization of entities"
-  html={DisplaCyEntHtml}
+  src="/images/displacy-ent1.html"
   height={100}
 />
diff --git a/website/docs/usage/101/_pos-deps.mdx b/website/docs/usage/101/_pos-deps.mdx
index f3c11f81c..1b385cb15 100644
--- a/website/docs/usage/101/_pos-deps.mdx
+++ b/website/docs/usage/101/_pos-deps.mdx
@@ -57,11 +57,10 @@ for token in doc:
 Using spaCy's built-in [displaCy visualizer](/usage/visualizers), here's what
 our example sentence and its dependencies look like:
 
-import DisplaCyLongHtml from 'images/displacy-long.html'
 import { Iframe } from 'components/embed'
 
 <Iframe
   title="displaCy visualization of dependencies and entities"
-  html={DisplaCyLongHtml}
+  src="/images/displacy-long.html"
   height={450}
 />
diff --git a/website/docs/usage/linguistic-features.mdx b/website/docs/usage/linguistic-features.mdx
index 97b0c863c..910daaf92 100644
--- a/website/docs/usage/linguistic-features.mdx
+++ b/website/docs/usage/linguistic-features.mdx
@@ -298,11 +298,9 @@ for token in doc:
 | toward        | `prep`     | shift     | `NOUN`   | manufacturers           |
 | manufacturers | `pobj`     | toward    | `ADP`    |                         |
 
-import DisplaCyLong2Html from 'images/displacy-long2.html'
-
 <Iframe
   title="displaCy visualization of dependencies and entities 2"
-  html={DisplaCyLong2Html}
+  src="/images/displacy-long2.html"
   height={450}
 />
 
@@ -732,11 +730,9 @@ doc = nlp(text)
 displacy.serve(doc, style="ent")
 ```
 
-import DisplacyEntHtml from 'images/displacy-ent2.html'
-
 <Iframe
   title="displaCy visualizer for entities"
-  html={DisplacyEntHtml}
+  src="/images/displacy-ent2.html"
   height={180}
 />
 
diff --git a/website/docs/usage/rule-based-matching.mdx b/website/docs/usage/rule-based-matching.mdx
index 6f8005245..b85fa7bb6 100644
--- a/website/docs/usage/rule-based-matching.mdx
+++ b/website/docs/usage/rule-based-matching.mdx
@@ -1105,11 +1105,9 @@ relations and tokens we want to match:
 > displacy.serve(doc)
 > ```
 
-import DisplaCyDepFoundedHtml from 'images/displacy-dep-founded.html'
-
 <Iframe
   title="displaCy visualization of dependencies"
-  html={DisplaCyDepFoundedHtml}
+  src="/images/displacy-dep-founded.html"
   height={450}
 />
 
diff --git a/website/docs/usage/saving-loading.mdx b/website/docs/usage/saving-loading.mdx
index b02cf563a..37a0464be 100644
--- a/website/docs/usage/saving-loading.mdx
+++ b/website/docs/usage/saving-loading.mdx
@@ -580,11 +580,9 @@ After installing the package, the custom colors will be used when visualizing
 text with `displacy`. Whenever the label `SNEK` is assigned, it will be
 displayed in `#3dff74`.
 
-import DisplaCyEntSnekHtml from 'images/displacy-ent-snek.html'
-
 <Iframe
   title="displaCy visualization of entities"
-  html={DisplaCyEntSnekHtml}
+  src="/images/displacy-ent-snek.html"
   height={100}
 />
 
diff --git a/website/docs/usage/v3-3.mdx b/website/docs/usage/v3-3.mdx
index 5e3b64722..d051d78b8 100644
--- a/website/docs/usage/v3-3.mdx
+++ b/website/docs/usage/v3-3.mdx
@@ -77,11 +77,9 @@ doc.spans["custom"] = [Span(doc, 3, 6, "ORG"), Span(doc, 5, 6, "GPE")]
 displacy.serve(doc, style="span", options={"spans_key": "custom"})
 ```
 
-import DisplacySpanHtml from 'images/displacy-span.html'
-
 <Iframe
   title="displaCy visualizer for overlapping spans"
-  html={DisplacySpanHtml}
+  src="/images/displacy-span.html"
   height={180}
 />
 
diff --git a/website/docs/usage/visualizers.mdx b/website/docs/usage/visualizers.mdx
index d30b6c88a..e5e6f4e1d 100644
--- a/website/docs/usage/visualizers.mdx
+++ b/website/docs/usage/visualizers.mdx
@@ -116,11 +116,9 @@ doc = nlp(text)
 displacy.serve(doc, style="ent")
 ```
 
-import DisplacyEntHtml from 'images/displacy-ent2.html'
-
 <Iframe
   title="displaCy visualizer for entities"
-  html={DisplacyEntHtml}
+  src="/images/displacy-ent2.html"
   height={180}
 />
 
@@ -147,11 +145,9 @@ use the `colors` setting to add your own colors for them.
 > displacy.serve(doc, style="ent", options=options)
 > ```
 
-import DisplacyEntCustomHtml from 'images/displacy-ent-custom.html'
-
 <Iframe
   title="displaCy visualizer for entities (custom styling)"
-  html={DisplacyEntCustomHtml}
+  src="/images/displacy-ent-custom.html"
   height={225}
 />
 
@@ -199,11 +195,9 @@ doc.spans["sc"] = [
 displacy.serve(doc, style="span")
 ```
 
-import DisplacySpanHtml from 'images/displacy-span.html'
-
 <Iframe
   title="displaCy visualizer for overlapping spans"
-  html={DisplacySpanHtml}
+  src="/images/displacy-span.html"
   height={180}
 />
 
@@ -227,11 +221,9 @@ specify which one displaCy should use with `spans_key` (`sc` is the default).
 > displacy.serve(doc, style="span", options=options)
 > ```
 
-import DisplacySpanCustomHtml from 'images/displacy-span-custom.html'
-
 <Iframe
   title="displaCy visualizer for spans (custom spans_key)"
-  html={DisplacySpanCustomHtml}
+  src="images/displacy-span-custom.html"
   height={225}
 />