Pass and Image path in a map

[marsh cliff]

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

---

To pass the image reference in your map function for the solution_links, you need to modify your code slightly. In Astro, when working with local images, you need to import them and use the imported object directly. Here's how you can adjust your code:

---
import { Image } from 'astro:assets';
import anpc_sal from "../../assets/anpc-sal.webp";
import anpc_sol from "../../assets/anpc-sol.webp";

const links = [
  // ... other links ...
  {
    href: "<https://anpc.ro/ce-este-sal/",>
    text: "Solutionarea alternativa a litigiilor.",
    icon: anpc_sal,
  },
  {
    href: "<https://ec.europa.eu/consumers/odr/",>
    text: "Solutionarea online a litigiilor.",
    icon: anpc_sol,
  }
];

// ... rest of your code ...
---

<footer>
  <div class="bg-base-content">
    <div class="container">
      <div class="mb-4 flex gap-8 max-md:flex-col">
        {
          solution_links.map(({ href, text, icon }) => (
            <a
              href={href}
              target="_blank"
            >
              <Image src={icon} alt={text} />
            </a>
          ))
        }
      </div>
    </div>
  </div>
</footer>

In this modified code:

1. We import the Image component from astro:assets at the top of the file.
2. The icon property in your links array now directly references the imported image objects (anpc_sal and anpc_sol).
3. In the JSX, we use the Image component instead of an img tag, and pass the icon directly as the src prop.

This approach works because when you import an image in Astro, it returns an object that can be used directly with the Image component as explained in the Astro documentation (https://docs.astro.build/en/guides/images/#images-in-astro-files).

Remember that the Image component is only available in .astro files. If you're using this in a React component or other framework component, you'll need to use a different approach, such as passing the src property of the imported image as described in the Astro documentation for framework components (https://docs.astro.build/en/guides/images/#images-in-ui-framework-components).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: