Render external link

[bright hull]

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;
};

[upbeat laurel]

Hi @bright hull. 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 in Astro using the <Image /> component, you need to be aware of a few important points:

1. Astro's <Image /> component requires authorization for remote images. You need to configure the domains or patterns of external image sources you want to optimize in your Astro config file Authorizing remote images (https://docs.astro.build/en/guides/images/#authorizing-remote-images).

2. For remote images, you must provide both width and height attributes to the <Image /> component Image properties (https://docs.astro.build/en/reference/modules/astro-assets/#src-required).

3. If you don't want to or can't authorize the external domain, you can fall back to using a standard <img> tag for external images.

Here's how you can modify your code to handle both internal and external images:

---
import { Image } from 'astro:assets';

// Function to check if URL is external
function isExternalUrl(url) {
  return url.startsWith('<http://'>) || url.startsWith('<https://'>);
}
---

{(() => {
switch (block.type) {
case "core/image":
if (block.attributes?.url) {
const isExternal = isExternalUrl(block.attributes.url);
if (isExternal) {
// For external images, use standard img tag
return (
<img
src={block.attributes.url}
width={block.attributes.width}
height={block.attributes.height}
class={classes}
style={styles}
alt={block.attributes.alt || ""}
/>
);
} else {
// For internal images, use Astro's Image component
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;
}
}
})()}

This code checks if the image URL is external. If it is, it uses a standard `<img>` tag. If it's not, it uses Astro's `<Image />` component.

Remember, if you want to use Astro's `<Image />` component for external images (which provides optimization benefits), you need to add the external domains to your Astro config as described in the **Authorizing remote images** (<https://docs.astro.build/en/guides/images/#authorizing-remote-images>) documentation.

Also, ensure that `width` and `height` are always provided for external images when using the `<Image />` component, as Astro cannot infer these values for remote images **Image properties** (<https://docs.astro.build/en/reference/modules/astro-assets/#src-required>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------