如何从本地主机查看 ReactJS 中的图像

Posted 2023-03-22

【中文标题】如何从本地主机查看 ReactJS 中的图像

【英文标题】：How to view an image in ReactJS from localhost

【发布时间】：2022-01-01 16:02:11

【问题描述】：

我使用 phpmyAdmin 作为我的 localhost，Axios 做后端功能并响应显示在网页上，我创建了一个存储 ID 和 Blob 的表，因为 Blob 可以存储图像数据。我使用了状态挂钩并渲染了要在页面上显示的每个项目，但是当我渲染页面时，显示了一个损坏的图像。我尝试在该图像数据上执行 console.log()，它在控制台浏览器上显示为 type: 'Buffer', data: Array(50639)。

简而言之，我正在尝试从本地主机中的表中检索图像并将其显示在浏览器上

反应

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);
    );
);

有没有办法将此 blob 数据转换为实际图像？

【参考方案1】：

签出这个 JS 对象：

<img src=URL.createObjectURL(file) alt="fooBar" />

它应该看起来像这样。

URL.createObjectURL：https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

【讨论】：

我试过这个来创建一个 URL，但是它没有显示到页面上。我再次 console.log() 它给了我一个值 "blob:localhost:3000/e1f1a190-955a-4f03-9f46-83a1934d8837"