#Dynamically import remote Images

15 messages · Page 1 of 1 (latest)

viral trout
#

Hi, Im trying to create a movie app to learn astro. I am using TMDB API in order to get the data. So the images are hosted remotelly in tmdb. I try to add Image component to the web but it threw an error:

Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received src.

Here below is the code

---
import { Image } from 'astro:assets';
const { original_title, poster_path } = Astro.props;

interface Props {
  original_title: string;
  poster_path: string;
}
---

<h2>{original_title}</h2>
<Image
  src=`https://image.tmdb.org/t/p/original${poster_path}`
  alt="descriptive text"
  width="190"
  height="270" />

I saw this article in the astro documentation: https://docs.astro.build/en/recipes/dynamically-importing-images/ but it seems to be only useful with local images and not with URLs. I changed the Image component to a img tag and it worker. So my questions is, there's a way to optimize the remote imported images with Image? Or it's just and limitation and we have to load them with img tag.

Thank you

Docs
Dynamically import images

Learn how to dynamically import images using Vite's import.meta.glob function.

tawny remnant
#

Can you share more code and more of the error? Typically this error is triggered when the path that has been passed is not a valid URL

viral trout
#

Yes the code is that, the URL works with a normal img tag:

# 
{popularMovies.map((movie) => <Movie original_title={movie.original_title} poster_path={movie.poster_path} />)}
``` This is the MapList component where I render the Movie component with the image
#

and this it the astro config:

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  image: {
    domains: ["image.tmdb.org"],
    remotePatterns: [{ protocol: "https" }],
  }
});
#

maybe the domain is incorrect?

viral trout
#

I found this

#

<!-- GOOD: src is a URL. -->
<Image src="https://example.com/my_image.png" alt="Cool image" />

<!-- BAD: src is an image's src path instead of the full image object. -->
<Image src={myImage.src} alt="Cool image" />

#

So how can it be dynamic if I have to put full url

tawny remnant
#

It doesn't have to be a full URL

#

You can build the URL dynamically and it should work just fine

#

If you have a reproduction I could take a look at, I may be able to help more

viral trout
#

I solve it!