Some of my images (not all) are copying to my dist folder my Vite+REACT site.

[MalgusGames]

Select Topic Area

Question

Body

I'm new to using Pages and Vite in general, and I'm not sure what I'm missing. Some of the images for my site, my flavicon and background image, are showing, but the rest of my images aren't. I am getting a notice when I deploy that these items are being transformed and added to my dist/ file. But the others aren't and I'm assuming that's why they aren't appearing? Any help or even just getting pointed in the right direction would be greatly appreciated!

[michaelsherwood]

You're running into this issue because your images you're attempting to reference are in the src directory.

Try moving your images in your public directory instead of storing them in your src directory.

Example:

📁 public/
├── 📄 instagram.png
├── 📄 tik_tok.png
└── 📄 youtube.png

Then you should be able to change your src/assets/components/Socials.jsx to be

export default function Socials() {
  const socialMedia = [
    {
      social: "tik-tok",
      link: "https://www.tiktok.com/@malgus_games_dev",
      imagePath: "/tik_tok.png",
    },
    {
      social: "instagram",
      link: "https://www.instagram.com/kramermalgusgames/",
      imagePath: "/instagram.png",
    },
    {
      social: "youtube",
      link: "https://www.youtube.com/@malgusgames",
      imagePath: "/youtube.png",
    },
  ];
  return (
    <div className="socials">
      {socialMedia.map((i) => (
        <a className="social-link" href={i.link}>
          <div className="social-image">
            <img src={i.imagePath} alt={i.social} />
          </div>
        </a>
      ))}
    </div>
  );
}