我在 Netlify 上部署了我的 Vite React 站点,但我的技能图标没有呈现! 这是网站。。 我在部署之前执行了 npm run build,我得到了 dist 文件夹并将其部署在 Netlify 上。 但起初资产文件夹没有图标,所以我也将其添加到资产(dist 文件夹)文件夹中,但没有成功! 请帮忙。
我想渲染我的作品集网站的技能图标。
您需要将您的
assets
目录移动到public
目录中,并且需要从各个img文件的源路径中删除./src
。比如:
{
id: 1,
icon: "/assets/html5.svg",
iconName: "HTML",
},
参考
Vite
文档您应该将您的资产文件直接放入public
文件夹中。
请注意:
您应该始终使用根绝对路径引用公共资产 - 例如,
应在源代码中引用为public/icon.png
。/icon.png
文件夹&文件结构:
Skills.jsx(图标)
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(图标)
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 © {new Date().getFullYear()} All Rights
Reserved.
</p>
</div>
</footer>
</>
);
}
export default Footer;
浏览器中的输出:
您是如何修复此错误的?即使我也面临这个问题。