#Images work in dev mode but not built

13 messages · Page 1 of 1 (latest)

limber heron
#

images are used like this:

import { Image } from "astro:assets";
import Icon from "../assets/image.webp";

<Image
src={Icon}
alt="Icon"
width="4096"
height="4096"
loading="eager"
/>

the image renders correctly in pnpm dev mode, but not in pnpm build
the network utility tab displays 404 requests
all images are stored under src/assets

hearty surgeBOT
#

Hi @limber heron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro provides several ways to use images in your project. The way you're using images seems correct for local images stored in the src/ directory. However, if you're facing issues in the build mode, it could be due to the way Astro handles assets in different modes.

In Astro v3.x, the Astro preview server returned a 301 redirect when accessing public directory assets without a base path. However, Astro v4.0 returns a 404 status without a base path prefix for public directory assets when the preview server is running, matching the behavior of the dev server. This could be the reason why you're seeing 404 requests in the network utility tab.

To resolve this, when using the Astro preview server, all of your static asset imports and URLs from the public directory must have the base value prefixed to the path. For example, if base: '/docs' is configured, an image from the public folder should be displayed like this:

<img src="/docs/images/my-image.png" alt="">

If you're still facing issues, it might be helpful to check if there are any problems with the new build strategy introduced in Astro v0.24. If you run into a problem, you can continue using the old build strategy by passing the --legacy-build flag.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@limber heron kapa.ai is still learning and improving, please let us know how it did by reacting below

limber heron
#

@hearty surge my images are not under /public, they are under /src so i should not be getting 404 on missing base path prefix
additionally my imports are relative

hearty surgeBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I see, if your images are under the src/ directory and you're using relative imports, then the issue might be different.

Astro processes images in the src/ directory differently than those in the public/ directory. Images in the src/ directory are processed and optimized, while those in the public/ directory are served or copied into the build folder as-is, with no processing.

Here are a few things you could check:

  1. Correct Import Syntax: Ensure that you're importing the images correctly. The import statement should look something like this:
import myImportedImage from '../assets/my-local-image.png';

And then you can use the imported image in the Image component like this:

<Image src={myImportedImage} alt="descriptive text" />

  1. Build Process: Check if there are any errors during the build process. Sometimes, the build process might fail to include certain assets due to various reasons.

  2. Astro Version: Ensure that you're using a version of Astro that supports the features you're using. Some features might not work as expected in older versions of Astro.

If none of these solutions work, it might be a good idea to create an issue in the Astro GitHub repository to get help from the Astro community.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@limber heron kapa.ai is still learning and improving, please let us know how it did by reacting below

limber heron
#

@hearty surge what does the cloudflare adapter do

hearty surgeBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The Cloudflare adapter allows Astro to deploy your hybrid or server-rendered site to Cloudflare. It enhances the Astro build process to prepare your project for deployment through Cloudflare.

Cloudflare provides CDNs, web security, and other services. If you're using Astro as a static site builder, you don't need an adapter.

The adapter can be installed using the astro add command which will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

For example, to add the Cloudflare adapter, you can use the following command:

npx astro add cloudflare

Or, if you prefer to install the adapter manually, you can add the @astrojs/cloudflare adapter to your project’s dependencies using your preferred package manager and then add the following to your astro.config.mjs file:

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
});

The adapter also provides options to determine which image service is used by the adapter. The options include 'passthrough', 'cloudflare', 'compile', and 'custom'.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@limber heron kapa.ai is still learning and improving, please let us know how it did by reacting below

shell hill
#

@limber heron not sure if this is your problem but i was facing some issues with image paths when i deployed using vercel