无法在 Reactjs 中显示从后端获取的图像

Question

我正在尝试显示从后端获取的图像，并且能够显示除图像之外的所有数据，

以下是我在 console.log 响应时得到的响应，

[
{
    "_id": "60a8b70be6384c8052fcc2e0",
    "name": "chan",
    "company": "micro",
    "profile": "uploads\\old.png",
    "__v": 0
},
{
    "_id": "60a8b80fe6384c8052fcc2e1",
    "name": "tucker",
    "company": "honda",
    "profile": "uploads\\employee.png",
    "__v": 0
},
{
    "_id": "60a8b84be6384c8052fcc2e2",
    "name": "emma",
    "company": "techsoft",
    "profile": "uploads\\girl.png",
    "__v": 0
},
{
    "_id": "60a8c004e6384c8052fcc2e3",
    "name": "amy",
    "company": "tec in",
    "profile": "uploads\\lady.jpg",
    "__v": 0
},
{
    "_id": "60a8d07627915c1e2429a8a2",
    "name": "tom",
    "company": "mil tech",
    "profile": "uploads\\tom-hardy.jpg",
    "__v": 0
}

]

这是我试图仅显示图像 People.js 的代码，

import React, {useEffect} from 'react'
import {connect} from 'react-redux'
import {startGetPeople} from '../actions/peopleAction'

function People({people:{people}, startGetPeople}){
useEffect(() => {
    startGetPeople()
}, [])
return(
    console.log('from People', people),
    <div className="container">
        <h2>People</h2>
        <ul>
        {
            people.map((people) => {
                return(
                    <li><img src={people.profile} style={{width: '30px', height: '30px'}}/></li>
                )
            })
        }
        </ul>
    </div>
 )
 }
 const mapStateToProps = (state) => ({
 people: state.people
 })
 export default connect(mapStateToProps, {startGetPeople})(People)

我的目录结构在这里

项目->上传->图像

项目-> 客户端-> src-> 组件-> People.js

Answer 1

您无法访问项目baseUrl之外的文件。 baseUrl由package.json决定，所以在大多数情况下它是（除非你会改变它，但无论如何你不能从那里升级） /src 。 您应该将图像移动到src中的某个位置，例如project/client/src/upload/images 。

此外，看起来这个路径uploads\\employee.png有不正确的分隔符，它应该更像这个\/而不是\\ 。 无论如何，您可以轻松地将其替换为profile.replace(/\\/, '\/') 。

Answer 2

如果您的图像在react.js中本地提供，您可以按以下方式进行操作：

import image from '../project/images/image.png'

....

<img src={image} alt="demo"/>

或者：

<img src={window.require('../project/images/image.png')} alt="demo"/>

OR
<img src={require('../project/images/image.png')} alt="demo"/>

让我知道它是否有效。