Reactjs 在React中显示存储为数据库中的路径字符串的图像

我想在React中显示一个图像，它位于src/images文件夹中。此图像有一个存储在数据库中的路径，看起来像“./images/profilepic.jpg”。我进行api调用，获取路径字符串并将其保存在名为profilepic的状态中，到目前为止，所有这些都正常工作。然后，我将状态变量分配给profilepic变量，当我“console.log（）”它时，它被正确分配

问题是，当我使用

时，我无法在网站上显示此图像。在过去的问题中，我尝试了几乎所有建议的方法，但都不奏效。我曾试图将state

this.state.profilepic

以及分配给它的字符串路径作为道具传递给一个单独的组件，但仍然遇到同样的问题。使用

会根据需要产生错误，它只接受字符串URL

有人能告诉我一个教程的方向吗？在这个教程中，图像作为URL/路径字符串存储在数据库中，并在React中调用和使用。即使这不是一个完整的项目，我想知道如何从前端做到这一点。如果这不是React中处理动态图像的推荐方法，那么将图像作为BLOB存储在数据库中，然后在React中调用实际图像本身而不是其路径是否更可取

获取调用：

getUserdetails(){
const userid = this.state.userid;
axios.get(`http://localhost:5000/getuser/details?userid=${userid}`)
.then(json => {
  if(json.data.success){
    this.setState({
        username: json.data.username,
        email: json.data.email,
        fullname: json.data.fullname,
        company: json.data.company,
        profilepic: json.data.propic
    })
    profilepic = this.state.profilepic
    console.log(profilepic)
    this.newprofile(profilepic)
  } 
})}

渲染输出

return (

        <div className="accout-page">
            <div className="sidebar">
            <Images profpic={profilepic} />
                <p><input type="file" onChange={this.onchangeImage} /><button type="button" onClick={this.uploadimage}>Upload</button></p>
    <p>Username: {username}</p>
    <p>Full Name: {fullname}</p>
    <p>Company: {company}</p>
    <p>Email: {email}</p>
            </div>
            <div className="content">
                <h1>Edit your details here</h1>
                <div className="form-error-info">{updateMessage}</div>
                <form>
                <div className="form-group">
                <label>Full Name:</label>
                <input 
                type="text"
                placeholder={fullname}
                onChange={this.onNameChange} required/></div>
                <div className="form-group">
                <label>Company:</label>
                <input
                type="text"
                placeholder={company}
                onChange={this.onCompanyChange} required/></div>
                <div className="form-group">
                <label>Current Password:</label>
                <input
                type="password"
                placeholder="enter current password"
                onChange={this.onoPassChange} required/></div>
                <div className="form-group">
                <label>New Password:</label>
                <input
                type="password"
                placeholder="enter new password"
                onChange={this.onPassChange} required/></div>
                <button className="btn btn-light" type="button" onClick={this.onSubmit}>Update</button>
                </form>
            </div>
        </div>
    )

返回(
上传

用户名：{Username}

全名：{fullname}

公司：{Company}

电子邮件：{Email}

在此处编辑您的详细信息
{updateMessage}
全名：
公司：
当前密码：
新密码：
使现代化
)

图像组件：

class Images extends React.Component{

render(){

    const profpic = this.props.profpic;
    console.log(profpic)
return(
    <div>
        <img src={profpic} alt="profile pic" width="100px" height="100px" />
    </div>
)}}

类映像扩展React.Component{
render（）{
const profpic=this.props.profpic；
控制台日志（profpic）
返回(
)}}


我认为您只需要模板文本
所以，基本上您应该在服务器上共享文件夹“图像”，并将图像存储在那里。您必须能够通过以下路径打开图像：


之后，您就可以使用此代码段了

<img src='/images/profilepic123.jpg' alt="myprofilepic"/>



或

要访问本地映像路径，还需要在环境变量中添加NODE_path=src，或将其附加到package.json文件中的开始键脚本中，如下所示

"start": "NODE_PATH=src react-scripts start",

试试这个：

import Image from "filePath/imgName";

您可以在任何代码行中使用此图标。例如：

<img src={Image}/>

基本上，您编写了正确的代码

但问题是，您没有API以如下方式打开此文件：

const openFile = (req, res, next) => {
    File.findOne({ _id: req.params.id,path:req.params.path }, function(err, users) {
        if (err) {
            return res.status(400).json({
                error: errorHandler.getErrorMessage(err)
            });
        }
        console.log(users);
        console.log(users.path);

    });
};

//route of this controller***
router.route('/api/openfile/:id')

您可以打开您的文件

<img={`http://localhost/api/openfile/${profilepic}`}/>


能否从代码中添加代码片段？这样很难理解，我有点困惑。我是否需要将此共享图像文件夹与我的react应用程序放在同一文件夹中？上面我还看到，您输入的端口是8080，但我的express服务器（为api提供服务）在端口5000上运行，在端口3000上运行React。如果您的应用程序中使用的是静态图像，则它应该位于React文件夹中，并导入了webpack loader。在您的例子中，图像存储在数据库中，所以您应该与服务器提供的react shared image文件夹分离，但情况不应该如此，因为如果我将源文件设置为字符串形式的路径，即：src='../images/profilepic.jpg'我可以看到图像。为什么当我将它设置为一个变量并为其分配了相同的字符串时，情况不是这样呢？因为如果在项目中使用静态图像，则应该导入它们。例如“从“/images/ProfilePic.jpg”导入ProfilePic，然后像“”一样使用它，这样您就无法使用数据库中的不同图像。您无法使用importMore中的变量读取此内容，这会产生以下错误：
找不到模块“../images/profile.jpg”
我在package.json文件中的启动脚本中添加了上述行，但在尝试启动应用程序时出现此错误：“NODE\u PATH”未被识别为内部或外部命令，可操作的程序或批处理文件。我是否必须将其添加到我的环境变量中？如果我这样做，我应该如何做，我是创建一个新的环境变量还是编辑一个现有的环境变量；npm启动；您只需在环境文件中创建一个新变量，只有在您已经知道映像路径的情况下，该变量才会起作用，图像路径存储在数据库中，每个用户都有一个与他们的配置文件pic关联的不同路径，因为每个用户都有不同的配置文件图片。我已经有了数据库中的图像路径，对于该用户，它是：“../images/profile.jpg”我已将其保存到状态变量中，但当我将其作为src添加到我的图像标记中时，我看不到网站上的图片。嗨，维杰，我很难理解这一点。在react中，我已经有了数据库中文件的路径，图像的路径是“../images/profile.jpg”，使用axios获取后，我将其保存到变量profilepic。当我设置img src={profilepic}时，我无法在网站中看到图像。但是如果我设置src=require（
${../images/profilepic.jpg}
），我可以看到图像
const openFile = (req, res, next) => {
    File.findOne({ _id: req.params.id,path:req.params.path }, function(err, users) {
        if (err) {
            return res.status(400).json({
                error: errorHandler.getErrorMessage(err)
            });
        }
        console.log(users);
        console.log(users.path);

    });
};

//route of this controller***
router.route('/api/openfile/:id')

<img={`http://localhost/api/openfile/${profilepic}`}/>