#Stable Image Links

1 messages · Page 1 of 1 (latest)

harsh remnant Apr 15, 2025, 1:28 PM

Part of the popularity of wordpress press site is that many people have linked to our unique, quirky images. As a I setup redirects and boy I have a created a lot (over 600 so far), I need to know to ensure that my images always compile to the same url and file type.

So I need to setup redirects for 15-20 images that others rely on. Do I just look up their urls on the site and assume they will remain stable

astral gorgeBOT Apr 15, 2025, 1:28 PM

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

I understand you're concerned about maintaining stable image URLs during your migration to Astro. Let me help you with handling image redirects in Astro.

Setting Up Image Redirects in Astro

When migrating from WordPress to Astro, maintaining stable image URLs is important for preserving external links. Here are your options:

1. Use Configured Redirects

Astro provides a built-in way to set up redirects in your astro.config.mjs file:

import { defineConfig } from "astro/config";
export default defineConfig({
  redirects: {
    "/old-image-path.jpg": "/new-image-path.jpg",
    "/old-blog/image.png": "/new-blog/image.png"
  }
});

This approach works well for static sites and SSR sites alike Redirects Configuration.

2. Place Images in the Public Folder

For the most stable approach, place your critical images in the public/ directory. Files in this directory maintain their exact paths and filenames in the built site:

public/images/your-quirky-image.jpg → /images/your-quirky-image.jpg

This is the most straightforward way to ensure image URLs remain stable Using Images from a CMS or CDN.

3. Use Platform-Specific Redirects

If you're deploying to platforms like Netlify or Cloudflare, you can also use their platform-specific redirect files:

For Netlify: Create a _redirects file in your public/ folder Netlify Static Sites
For Cloudflare: Use a _redirects file in your public/ folder Cloudflare Platform

Important Considerations

Don't rely on automatic hashing: When importing images in Astro components, filenames get hashed (e.g., /_astro/cat.a6737dd3.png). This isn't suitable for maintaining stable external URLs Navigating Image Imports.
Check your base path: If you're using a base path in your Astro config, remember to include it in your image URLs and redirects Base Path Configuration.

For your specific case with 15-20 critical images, I recommend placing them in the public/ folder with the same paths they had in WordPress, which will maintain their URLs without needing redirects. For any images that must change location, set up explicit redirects in your Astro config.