#Troubleshooting Image Display Issues After Deploying an Astro Blog on Netlify

3 messages · Page 1 of 1 (latest)

rain coyote
#

I have also the same issue.

ripe timber
#

I have too

summer lantern
#

What code are you using to display images?
One of your outputs is:

<img class="blog-post-image astro-TVU6SNPD" src="../../../Assets/Unlocking 6 Powerful Methods to Discover Profitable, Low-Competition Niches.png" alt="A Strategic Guide to Low-Competition, High-Profitability Ventures">

If you are not going to use the Astro <Image /> component, then your images have to be in the public folder.

Otherwise, in Astro 3, you should have something like:

---
import { Image } from "astro:assets";
import someImage from "../../../assets/Unlocking-6-Powerful-Methods-to-Discover-Profitable-Low-Competition-Niches.png"
---
<Image src={someImage} alt="A Strategic Guide to Low-Competition, High-Profitability Ventures" />

Couple of things though: "Assets" folder would typically be assets lowercase, and I wouldn't use filenames with spaces.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

encodeURI() - JavaScript | MDN

The encodeURI() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two surrogate characters). Compared to encodeURIComponent(), this function encodes fewer characters, p...