我在一個投資組合網站上作業，我處理過的各種客戶/專案都有自己的資訊頁面。我還沒有完全確定要在哪里托管影像，但現在我正在構建這些單獨的專案頁面，希望只在本地加載影像。目前，我寫的代碼沒有收到任何錯誤，但我的影像都沒有在瀏覽器中呈現。我懷疑這可能是因為沒有任何<img>元素被附加到任何東西上，但老實說我不確定。我還能在這里錯過什么？這與 Webpack 配置有什么關系嗎？
注意：標簽上的src屬性按原樣使用檔案夾img的正確路徑。public
應用程式.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import './App.css';
import Landing from "./components/Landing";
import About from "./components/About";
import ProjectPage from "./components/ProjectPage";
import projects from "./utils/projectlists.js";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route element={<Landing />} exact path="/" />
<Route element={<About field="design" />} exact path="/design" />
<Route element={<About field="web"/>} exact path="/web" />
<Route element={<ProjectPage projects={projects} />} path={"/projects/:name"}/>
</Routes>
</Router>
</div>
);
}
export default App;
projectlists.js（示例資訊）
const projects = [
{
id: 1,
name: "Project Name",
link: "project-name",
skills: "Project skills",
images: ["image1.png", "image2.png", "image3.png"],
}
export default projects;
ProjectPage.js（包含我要加載的影像的 div 將去哪里）
import React from "react";
import { useParams } from "react-router";
import '../App.css';
export default function ProjectPage({ projects }) {
const { name } = useParams();
return (
<div className="project-layout">
<div className="photo-box">
{projects.filter(project => name === project.link).map(
project => (
project.images.forEach(image => (
<div key={project.id}>
<img className="proj-image" src={require(`../../public/assets/images/${image}`)} alt={""}></img>
</div>
)
)
))
}
</div>
</div>
);
};
uj5u.com熱心網友回復：
試試看嘛
<img className="proj-image" src={`../../public/assets/images/${image}`} alt={""}></img>
或者
<img className="proj-image" src={require(`../../public/assets/images/${image}`).default} alt={""}></img>
uj5u.com熱心網友回復：
將影像放在公共檔案夾中，并將其路徑用作 src。
示例：將影像放在 public/images 檔案夾中，然后，
<img src="/images/image1.jpg" />
uj5u.com熱心網友回復：
問題解決了。結果forEach不會像預期的那樣回傳任何東西；該map方法是我需要的。這篇文章有答案：React JSX 中的 forEach() 不輸出任何 HTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/526417.html