#How do I import data files like .json and use images in these along with the Astro Image function.

4 messages · Page 1 of 1 (latest)

molten quail
#

Here is an example of my data file and the error I am seeing:

[
  {
    "name": "Health Services Laboratories (HSL)",
    "logo": "@logos/logo-health-services-labs.jpg"
  },
  {
    "name": "The Doctors Laboratory (TDL)",
    "logo": "@logos/logo-the-doctors-laboratory.png"
  }
]

---
import clients from "@data/clients.json"
---

<div class="grid grid-cols-fill-300 gap-2 mt-10">
        { clients.map((client) =>
                    <div class="bg-white border-slate-100 p-4 py-10 flex flex-col justify-center items-center">
                        <Image src={ client.logo }
                                     alt={ client.name }
                                     class="max-h-20 w-full object-contain self-center"
                                     widths={ [200, 300, 400, 600] }
                        />
                    </div>
        ) }
            </div>
        </Container>

Astro detected an unhandled rejection. Here's the stack trace:
LocalImageUsedWrongly: Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received @logos/logo-the-doctors-laboratory.png.

mental vaultBOT
#

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

#

In Astro, local images must be imported into the file in order to be used. This includes images that are referenced in your JSON data file. The error you're seeing is because you're trying to use a string file path (@logos/logo-the-doctors-laboratory.png) as the src parameter for the Image component, which is not allowed.

To fix this, you need to import the images in your Astro file and then map them to the corresponding entries in your JSON data. However, based on the knowledge sources provided, there's no direct way to dynamically import images based on the JSON data due to limitations with dynamic imports in Astro and Vite.

A workaround could be to import all images in a directory and then map them to the corresponding entries in your JSON data based on the file name. However, this approach might not be feasible if you have a large number of images.

Here's an example of how you might import images:

---
import clientLogo1 from '@logos/logo-health-services-labs.jpg';
import clientLogo2 from '@logos/logo-the-doctors-laboratory.png';
import clients from "@data/clients.json"

const logos = {
  'logo-health-services-labs.jpg': clientLogo1,
  'logo-the-doctors-laboratory.png': clientLogo2,
};
---

<div class="grid grid-cols-fill-300 gap-2 mt-10">
  {clients.map((client) =>
    <div class="bg-white border-slate-100 p-4 py-10 flex flex-col justify-center items-center">
      <Image src={logos[client.logo.split('/')[1]]}
             alt={client.name}
             class="max-h-20 w-full object-contain self-center"
             widths={[200, 300, 400, 600]}
      />
    </div>
  )}
</div>

In this example, client.logo.split('/')[1] is used to extract the file name from the logo property in your JSON data. This file name is then used to look up the corresponding imported image in the logos object.