如何在反应应用程序中从数据库中获取和显示图像

Posted 2023-03-07

【中文标题】如何在反应应用程序中从数据库中获取和显示图像

【英文标题】：how to fetch and display images from database in react app

【发布时间】：2019-11-27 11:12:11

【问题描述】：

我正在尝试从本地存储加载壁纸列表，我已经发布它们并将它们的路径保存在 mongoDB 中。

所以我试图循环遍历路径数组并将每个路径用作每个 img 标签中的 src

main.js 组件：

import React,  Component  from 'react'

export default class Main extends Component 
    state = 
        data : []
    
    componentDidMount()

        fetch('http://localhost:5000/').then(res => res.json())
        .then(data=> this.setState(data))

    
    render() 

        console.log(this.state.data)

        return (
            <div>
                <h1>Main</h1>
                this.state.data ? this.state.data.map(img => 
(<div key=img._id>img ? <img src=require(`$img.img.path`) 
alt=img.img.name/>:<span>deleted</span></div>)): 
<h3>loading</h3>
            </div>
        )
    

服务器代码：

  server.get('/', (req, res)=>
        Wallpaper.find(, (err, result)=>
            if(err) 
                res.json(msg: err)
            else
                res.json(result)
            
        )
    )

它应该返回 react 应用程序的上传文件夹中的图像，但它返回此错误：

Error: Cannot find module '/home/ahdy/Workspace/Wally/wallcraft/public/uploads/ak47456193147469824_n.jpg'

【问题讨论】：

为什么要拨打require()？如果这些图像位于服务器上的某个文件夹中，则只需将 src 直接添加到它们的 URL。

this.state.data ? 无论如何都会是真的，使用this.state.data.length ?

【参考方案1】：

这个

<img src=require(`$img.img.path`)

应该是

<img src=`/uploads/$img.img.path`

这里不需要require

注意：把正确的路径放在那里

【讨论】：

感谢我像你提到的那样修复了它，但我使用了 img.name 而不是 img.path