Images not being displayed/loaded in production environment

[cyberpath-official]

Hi all,

Trying to push custom images that are located in /src/assets/images. These images will load perfectly fine during testing using npm run dev, but not in my final build.

FYI I'm pushing using a cloudflare page. Site is deployed static.
Live Site

I've linked an example page (about.astro) where the image in the HeroSplash segment won't load it's splash background image during deployment to cloudflare.

Package.json and navigation.js (attached as txt) as well.

FYI I'm pushing using a cloudflare page. Page is currently set to static.

I've linked an example page (about.astro) where the image in the HeroSplash segment won't load it's splash background image during deployment to cloudflare.

Package.json and navigation.js (attached as txt) as well.

about.txt
package.json
navigation.txt

[prototypa]

Hi @cyberpath-official

Replace "/src/assets/images/tech.jpeg" by "~/assets/images/tech.jpeg"

Something similar to what we have in index.astro: https://github.com/onwidget/astrowind/blob/main/src/pages/index.astro#L35

For now, always use ~/assets in front to load any images you have inside the src/assets folder

[cyberpath-official]

Hi @prototypa

I've tried doing this, with no luck.
The only thing I can think of is that I've directly made changes to the underlying component HeroSplash.astro (copy of Hero.astro with the image as a splashback).
But I don't quite have a full grasp on tailwind css yet so I wasn't able to patch in the variable to get it dynamically settable in about.astro.

I'm also aware that local files need to be imported into ,astro files to be used, but I also couldn't get this working in the conventional manner because as mentioned before it's a url of a <div> object rather than a <Image>

I've attached HeroSplash.astro below.

HeroSplah.txt

Thanks