ฉันเคย PHPmyAdmin เป็นของฉัน localhost,Axios ต้องทำปรับแต่งโปรแกรมเบื้องหลัฟังก์ชันและตอบโต้เพื่อให้แสดงบนหน้าเว็บที่ถูกเขียนด้วย,ฉันสร้างโต๊ะที่ร้านขายบัตรประจำตัวและแก้จุดเหลือตั้งแต่แก้จุดเหลือสามารถจะจัดเก็บภาพข้อมูล ฉันเคยรัฐ hooks และจัดการพากันเป็นรายการที่จะถูกแสดงบนหน้าแต่ตอนที่ฉันจัดการพาคนหน้าเป็นพังภาพถูกแสดง ฉันพยายามจะคอนโซล.ปูมบันทึก()บนภาพข้อมูลและมันแสดงเป็น{ประเภท:'บัฟเฟอร์',ข้อมูล:อาเรย์(50639)}บนคอนโซลเบราว์เซอร์
สรุปสั้นๆ..ผมพยายามที่จะเก็บภาพจากโต๊ะใน localhost และแสดงมันอยู่บนเบราว์เซอร์
ตอบโต้
function ProjectCard() {
const [projectCard, setProjectCard] = useState([]);
const instance = axios.create( {
baseURL: "http://localhost:3001/api",
});
useEffect(() => {
instance.get("/getAvailableProjects").then((response) => {
setProjectCard(response.data);
});
}, []);
return (
<div className="row g-4 py-4 border-bottom">
{projectCard.map((val) => {
return (
console.log(val.PROJECT_IMAGE) {/* displayed as {type: 'Buffer', data: Array(50639)} */}
<div className="col-lg-3 col-md-6 mb-2" key={val.PROJECT_ID}>
<img id="project-img" src={val.PROJECT_IMAGE} className="img-fluid" /> {/* BROKEN IMAGE */}
</div>
);
})}
</div>
)
};
export default ProjectCard;
เซิร์ฟเวอร์
app.get("/api/getAvailableProjects", (req, res) => {
const sqlQuery = "SELECT *, from projectdetail";
db.query(sqlQuery, (_error, result) => {
res.send(result);
});
});
มันมีทางที่จะแปลงนี้แก้จุดเหลือข้อมูลไปเป็นจริงของภาพ?