无法从后端nodejs向reactjs上的卡组件显示图像

Question

我试图从后端(后端使用nodejs，sequilize(显示上传的图像，并尝试将其显示到后端的卡组件(我使用reactjs作为前端(。我将图像输入并保存到文件夹名称public/img中，当我尝试使用poster上传时，图像已成功输入到文件中，结果如下在此处输入图像描述

但是当我尝试在前端显示图像时，图像不会出现，这里是错误

在此处输入图像描述

错误是得到http://localhost:3000/img/92c4c0be36fa5f1419f938f509df5472.png404(未找到(

这里是显示数据的代码

import React, {Component} from 'react';
import {Card, CardGroup} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import jwt_decode from 'jwt-decode';
class ProdukList extends Component{
constructor(props){
super(props);
this.state = {
items:[],
isLoaded: false
}
}
componentDidMount(){
const token = localStorage.getItem('usertoken')
const decoded = jwt_decode(token)
this.setState({
id_user: decoded.id_user,
})
console.log(decoded.id_user)
fetch(`http://localhost:4000/product/?id_user=${decoded.id_user}`)
.then(res=> res.json())
.then(
(result)=>{
this.setState({
items: result,
isLoaded: true
});
console.log(result)
},
(error) =>{
this.setState((error));
console.log(error)
}
)
}
render(){
console.log(this.state.items)
var{isLoaded,items}=this.state;
if(!isLoaded){
return<div>Loading.......</div>
}else{
return(
<div className="ProdukList">
{items && items.length > 0 ? items.map(item =>(
<CardGroup>
<Card style={{width: '18rem'}} key={item.id_produk}>
<Card.Img variant="top" src={item.image} alt="img"></Card.Img>
<Card.Body>
<Card.Title>
{item.Nama_produk}
</Card.Title> 
<Card.Text>
{item.Price}<br/>
{item.Deskripsi}
</Card.Text>
<Card.Footer>
<small className="text-muted">Stock : {item.Jumlah_stock}</small>
</Card.Footer>
</Card.Body>  
</Card>
</CardGroup>
)) : 'Kosong'}
{console.log(items)}
</div>
)
}
}
}
export default ProdukList;

这里是数据库的模型

const Sequelize = require("sequelize")
const db = require("../database/db")
//const {uploadDir} = require("../upload")
const multer = require("multer");
const express = require("express")
const app = express();
const path = require('path');
const crypto = require('crypto');
app.use(express.static('public/img'));

const uploadDir = '/img/';
const storage = multer.diskStorage({
destination:"./public"+uploadDir,
filename: function (req,file,cb){
crypto.pseudoRandomBytes(16, function(err,raw){
if (err) return cb (err)
cb(null, raw.toString('hex')+path.extname(file.originalname))
})
}
})
const uploadfile = multer({storage: storage, dest:uploadDir})
module.exports= uploadfile;
module.exports = db.sequelize.define(
'produks',
{
id_produk:{
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
id_user: {
type: Sequelize.INTEGER
},
Nama_toko:{
type: Sequelize.STRING
},
Nama_Produk:{
type: Sequelize.INTEGER
},
image:{
type: Sequelize.STRING,
get(){
const image = this.getDataValue('image');
return uploadDir+image;
}
},
Deskripsi:{
type: Sequelize.STRING
},
Price:{
type: Sequelize.INTEGER
}, 
Jumlah_stock:{
type:Sequelize.INTEGER
}
},
{
timestamps: false
}
)

这里是将数据发布到数据库的代码

const express=require("express")
const product = express.Router()
// const multer = require("multer");
const uploadfile = require('../upload')
const produk = require('../models/produk')
const {validationResult } = require('express-validator/check');
const { matchedData, sanitize } = require('express-validator/filter'); //sanitize form params
produk.sync().then(()=>{
console.log("produk berhasil sync")
}).catch(err=>{
console.log("produk gagal sync",err)
})
product.post('/addproduk/',[
uploadfile.single('image')
],(req,res)=>{ 
const errors = validationResult(req);
if(!errors.isEmpty()){
return res.status(422).json({errors: errors.mapped()})
}
const produkData = {    
id_user:req.body.id_user,
Nama_toko:req.body.Nama_toko,
Nama_Produk:req.body.Nama_Produk,
image: req.file === undefined ? "": req.file.filename,
Deskripsi:req.body.Deskripsi,
Price:req.body.Price,
Jumlah_stock:req.body.Jumlah_stock
}
console.log(produkData)
if(!produkData){ 
res.status(400)
res.json({
error: 'Bad data'
})
}else{
produk.create(produkData)
.then(data=>{
res.send(data)
})
.catch(err=>{
res.json('error: '+err)
})
}
})

Answer 1

您的react项目具有相同的"公共"；文件夹当你启动你的react项目进行开发时，它会启动自己的"；服务器"；在端口3000；"公共"；react和express项目之间的文件夹