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

Question

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

问题是当我使用<img src{profilepic} alt="myprofilepic"/> 时，我无法在网站上显示此图像。我已经尝试了过去问题中建议的几乎所有方法，但都没有奏效。我试图将状态this.state.profilepic（分配给它的字符串PATH）作为道具传递给单独的组件，但我仍然遇到同样的问题。使用 <img src=(require{profilepic}) 会产生错误，因为 require 只会使用字符串 URL。

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

获取调用：

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

图像组件：

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

Answer 1

所以，基本上你应该在你的服务器上拥有共享文件夹“images”并在那里存储图像。您必须能够通过

之类的路径打开图像

http://localhost:8080/images/profilepic123.jpg

之后你就可以使用这个代码sn-p了

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

或

<img src={profilePic} alt={profileName}/>

Answer 2

<img src={require(`${profilepic}`)} />

我认为你只需要模板文字

Answer 3

要访问本地图像路径，您还需要在环境变量中添加 NODE_PATH=src 或将其附加到 package.json 文件中的启动键脚本中，如下所示。

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

Answer 4

试试这个：

import Image from "filePath/imgName";

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

<img src={Image}/>

Answer 5

基本上，您已经编写了正确的代码<img src={profilepic} alt="myprofilepic"/> 但问题是你没有 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}`}/>