I just deployed my Vite React site but my icons/images aren't deployed
Asked Answered
T

3

6

I deployed my Vite React site on Netlify but my skill icons aren't rendered!! Screenshot o site. Here's the site.. I did execute npm run build before deploying, I got the dist folder and deployed that on Netlify. But at first the assets folder didn't had the icons so I added it in the assets (of dist folder) folder too, but no success!! Please help.

I wanna render my skill icons of my portfolio site.

Tesler answered 25/12, 2022 at 8:53 Comment(2)
Could You provide link to the repo please?Zacharia
github.com/mjshubham21/Mjshubham21PortfolioTesler
I
7

You need to move your assets directory into the public directory, and you need to remove ./src from the source path of the various img files. Something like:

{
    id: 1,
    icon: "/assets/html5.svg",
    iconName: "HTML",
},
Ics answered 25/12, 2022 at 9:11 Comment(1)
Thanks, it worked in my local host, but not on my deployed site... mjshubham21.live thoughts?? console says " Failed to load resource: the server responded with a status of 404 () " for the icons...Tesler
Z
3

Referring to the Vite documentation You should put Your assets files into public folder directly.

Notice that:

You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png.

folder&file structure:

enter image description here


Skills.jsx (icons)

import React from "react";
// import Skill from "./Skill";

function Skills() {
  return (
    <>
      <section className="skills">
        <div className="card">
          <div className="content">
            <img className="skillIcon" src="/html5.svg" alt="Icon" />
            <p className="skillName">HTML</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/css3.svg" alt="Icon" />
            <p className="skillName">CSS3</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/js.svg" alt="Icon" />
            <p className="skillName">JavaScript</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/react.svg" alt="Icon" />
            <p className="skillName">ReactJs</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/mongodb.svg" alt="Icon" />
            <p className="skillName">MongoDB</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/express.svg" alt="Icon" />
            <p className="skillName">ExpressJs</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/github.svg" alt="Icon" />
            <p className="skillName">GitHub</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/node.svg" alt="Icon" />
            <p className="skillName">NodeJs</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/password.svg" alt="Icon" />
            <p className="skillName">Authentication</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/api.svg" alt="Icon" />
            <p className="skillName">API</p>
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

Intro.jsx (hero.gif)

import React from "react";
import hero from "/hero.gif";
function Intro() {
  return (
    <>
      <main>
        <section id="intro" className="hero">
          <div className="heroText">
            <p className="topData">Hey, I'm</p>
            <h1 className="title">Shubham Pawar</h1>
            <p className="heroData">I'm a MERN stack Developer.</p>
            <button className="btn">Contact Me</button>
            <button className="btn">Resume</button>
          </div>
          <div className="heroImg">
            <img className="heroGif" src={hero} alt="hero img" />
          </div>
        </section>
      </main>
    </>
  );
}

export default Intro;

Footer.jsx (icons)

import React from "react";

function Footer() {
  return (
    <>
      <footer className="Footer">
        <div className="footer-right">
          <a href="#"></a>
          <a href="#">
            <img className="footerIcon" src="/linkedin2.png" alt="linkedIn" />
          </a>
          <a href="#">
            <img className="footerIcon" src="/github2.png" alt="GitHub" />
          </a>
          <a href="#">
            <img className="footerIcon" src="/instagram.png" alt="Instagram" />
          </a>
          <a href="#">
            <img className="footerIcon" src="/twitter.png" alt="Twitter" />
          </a>
        </div>

        <div className="footer-left">
          <p className="footer-links">
            <a className="link-1" href="#">
              Home
            </a>

            <a href="#about">About</a>

            <a href="#contact">Contact</a>
          </p>
          <p>
            @mjshubham21 Copyright &copy; {new Date().getFullYear()} All Rights
            Reserved.
          </p>
        </div>
      </footer>
    </>
  );
}

export default Footer;

Output in browser:

enter image description here

Zacharia answered 25/12, 2022 at 10:10 Comment(3)
Thanks, it worked in my local host but not on the live site... mjshubham21.liveTesler
@Tesler Are You sure ? :-) I see icons ...:-PZacharia
Yeah it was fixed...Tesler
L
0

You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in the source code as /icon.png.

The above lines saved me from further frustrations of vite+React deployment

Lekishalela answered 19/2, 2024 at 14:39 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.