反应/节点 => 图像显示不允许加载本地资源

Question

我正在进行一个react/node网站项目。很简单的网站有一个crud。我的crud工作了，但我的图片没有出现(它们上传在public/uploads/news/文件夹中，路径保存在mongoDb中(对于我的新闻，我可以看到标题、消息、日期，但图片坏了，我只有alt。当我转到控制台并打开元素时，补丁是可以的"；c：/用户//public/uploads/news/nameofympicture.jpg"；。我刚收到一条错误消息"；不允许加载本地资源"；

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { dateParser, isEmpty } from "../../../general/utils/Utils";
import { updateNews } from "../../../../store/actions/news.actions";
import DeleteCard from "./DeleteCard";
import Loader from "../../../general/utils/Loading";
const Card = ({ news }) => {
const [isLoading, setIsLoading] = useState(true);
const [isUpdated, setIsUpdated] = useState(false);
const [textUpdate, setTextUpdate] = useState(null);
const newsData = useSelector((state) => state.newsReducer);
const dispatch = useDispatch();
const updateItem = () => {
if (textUpdate) {
dispatch(updateNews(news._id, textUpdate));
}
setIsUpdated(false);
};
useEffect(() => {
!isEmpty(newsData[0]) && setIsLoading(false);
}, [newsData]);
return (
<li className="card-container" key={news._id}>
{isLoading ? (
<Loader />
) : (
<>
<div className="card-right">
<div className="card-header">
{isUpdated === false && <h3>{news.title}</h3>}
{isUpdated && (
<div className="update-title">
<textarea
defaultValue={news.title}
onChange={(e) => setTextUpdate(e.target.value)}
/>
</div>
)}
<span>{dateParser(news.createdAt)}</span>
</div>
{isUpdated === false && <p>{news.message}</p>}
{isUpdated && (
<div className="update-post">
<textarea
defaultValue={news.message}
onChange={(e) => setTextUpdate(e.target.value)}
/>
<div className="button-container">
<button className="btn btn-success" onClick={updateItem}>
Valider modification
</button>
</div>
</div>
)}
{news.picture && (
<img src={news.picture} alt="card-pic" className="card-pic" />
)}
{news.video && (
<iframe
width="500"
height="300"
src={news.video}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
title={news._id}
></iframe>
)}
<div className="button-container">
<button className="btn btn-primary" onClick={() => setIsUpdated(!isUpdated)}>Edit</button>
<DeleteCard id={news._id} />
</div>
</div>
</>
)}
</li>
);
};
export default Card;

如果有人想要完整的代码https://github.com/macath/AJC-modelism如果你有更多的问题，请问我。我从4天起就在处理这个问题，我真的不明白为什么它不起作用。我指定这个项目将上线，所以我需要一个有效的服务器解决方案，而不仅仅是本地

Ps：对不起我的英语我是法语

Answer 1

感谢@Rolland Costomarob&悉达赫·赛斯我认为问题是，我使用multer上传我的照片，我认为我没有正确使用它。

const router = require('express').Router();
const newsController = require('../controllers/news.controller');
const multer = require('multer');
const imageStorage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './client/public/uploads/')
},
filename: (req, file, cb) => {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, 'file-' + uniqueSuffix + '.jpg')
}
});
const upload = multer({
limits: {
fileSize: 10000000
},
fileFilter: (req, file, cb) => {
if (file.mimetype === 'image/png' || file.mimetype === 'image/jpg' || file.mimetype === 'image/jpeg') {
cb(null, true);
}
else {
cb(new multer.MulterError('mauvais format de document'));
}
},
storage: imageStorage
});
router.get('/', newsController.readNews);
router.post('/', upload.single('file'), newsController.createNews);
router.put('/:id', newsController.updateNews);
router.delete('/:id', newsController.deleteNews);
module.exports = router;

如果你有解决方案，你只需拯救我的生命

Answer 2

请检查此答案

如何使用node.js和express 上传、显示和保存图像

Answer 3

问题已经解决。在我的news.controller中，我替换

picture: req.file.path

通过

picture: req.file.filename

在我的卡片.js中，我替换

img src={news.picture}

通过

<img src={`${window.location.origin}/uploads/${news.picture}`}

谢谢你的帮助