this is my code with I render image from wp headless to astro, however I've cannot render image external to wp, this is my fragment code: case "core/image": if (block.attributes?.url) { return ( <Image src={block.attributes?.url} width={block.attributes?.width} height={block.attributes?.height} class={classes} style={styles} alt={block.attributes?.alt || ""} /> ); } else { return null; };
#Render external link, mainly svg format
mellow kernel
hasty zodiacBOT
Hi @mellow kernel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To render external images, especially in SVG format, from sources outside WordPress in your Astro project, you'll need to make some adjustments to your code. Here's how you can modify your approach:
-
For SVG images, you can use the HTML
<img>tag directly instead of Astro's<Image />component. This is because SVGs are vector graphics and don't require the same optimization as raster images. -
For other external images, you can still use Astro's
<Image />component, but you'll need to handle them differently from local images.
Here's an updated version of your code that should work for both WordPress images and external images, including SVGs:
case "core/image":
if (block.attributes?.url) {
const isExternalSVG = block.attributes.url.endsWith('.svg');
if (isExternalSVG) {
return (
<img
src={block.attributes.url}
width={block.attributes.width}
height={block.attributes.height}
class={classes}
style={styles}
alt={block.attributes.alt || ""}
/>
);
} else {
return (
<Image
src={block.attributes.url}
width={block.attributes.width || 100}
height={block.attributes.height || 100}
class={classes}
style={styles}
alt={block.attributes.alt || ""}
/>
);
}
} else {
return null;
}
This code does the following:
- It checks if the image URL ends with '.svg' to determine if it's an SVG file.
- If it's an SVG, it uses a regular
<img>tag to render the image. - For non-SVG images, it uses Astro's
<Image />component. - For the
<Image />component, it provides fallback values of 100 for both width and height. This is because Astro's<Image />component requires these attributes for external images as mentioned in the Astro documentation (https://docs.astro.build/en/guides/images/#images-in-astro-files).
Remember to import the Image component at the top of your Astro file:
---
import { Image } from 'astro:assets';
---
This approach should allow you to render both WordPress images and external images, including SVGs, in your Astro project. If you encounter any issues with specific image formats or sources, you may need to add additional checks or handling.