#Mapping over data in astro component and rendering images from urls.

6 messages · Page 1 of 1 (latest)

slender pine
#

my data is in (src>data>popularDestinations.js) and of the form export default [ { city: 'Miami', averagePrice: 115, propertyCount: 86, imageUrl: '../images/miami.jpg', imageAlt: 'Beach in Miami' } ]
all of the images are located in (src>images)

and here is where i am calling them (src>pages>workcation.astro)
`---
import MainLayout from '../layouts/MainLayout.astro'
import logo from '../images/logo.svg'
import beach from '../images/beach-work.jpg'
import '../styles/global.css'
import popularDestinations from '../data/popularDestinations'

<MainLayout>

<div>
    <h2>Popular Destinations</h2>
    <p>A selection of great work-friendly cities with lots to see and explore.</p>
    {
        popularDestinations.map((destination, i) => {
            return (
                <div>
                    <div>
                        <img src={destination.imageUrl.src} alt={destination.imageAlt} />
                        <div>
                            <h3 />
                            <p />
                            <div>
                                <a href="" />
                            </div>
                        </div>
                    </div>
                </div>
            )
        })
    }
</div>

</MainLayout>
I tried it withdestination.imageUrl.srcand asdestination.imageUrland both give404 /images/malibu.jpg` etc

visual mistBOT
#

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

#

Based on the information provided in the extracts, it seems like you're trying to use Astro's image integration to load images from your local project directory. However, there seems to be a misunderstanding in how to use the image integration.

In Astro, when you import an image, it returns an object rather than a source string. This object has properties like src, width, height, and format. So when you're trying to use the image in an <img> tag, you should refer to the src property of the object.

However, in your case, you're storing the image paths as strings in your popularDestinations.js file and then trying to access a src property on those strings, which doesn't exist. That's why you're getting a 404 error.

Instead, you should import the images directly in your Astro file where you're using them. Here's how you can do it:

# 
---
import MainLayout from '../layouts/MainLayout.astro'
import logo from '../images/logo.svg'
import beach from '../images/beach-work.jpg'
import '../styles/global.css'
import popularDestinations from '../data/popularDestinations'
import miamiImage from '../images/miami.jpg'
---
<MainLayout>
    
    <div>
        <h2>Popular Destinations</h2>
        <p>A selection of great work-friendly cities with lots to see and explore.</p>
        {
            popularDestinations.map((destination, i) => {
                let image;
                if (destination.city === 'Miami') {
                    image = miamiImage;
                }
                // Add more conditions here for other cities
                return (
                    <div>
                        <div>
                            <img src={image.src} alt={destination.imageAlt} />
                            <div>
                                <h3 />
                                <p />
                                <div>
                                    <a href="" />
                                </div>
                            </div>
                        </div>
                    </div>
                )
            })
        }
    </div>
</MainLayout>

In this example, I've imported the Miami image directly and then used a conditional to assign the correct image to each destination. You would need to add more conditions for the other cities.

Alternatively, you can add ?url to your imports to tell them to return a source string, like so:

import miamiImage from '../images/miami.jpg?url';

Then you can use the image like this:

<img src={miamiImage} alt="A rocketship in space." />
#

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