图片未显示，取自 db

Question

我在显示图像时遇到问题。

最初图片在 MongoDb 中成功发布并保存，您可以在下面的图片中看到

然后从数据库中获取图像然后显示，但是在显示时图像被破坏并且控制台中显示以下错误..

（注意：- 我在前端使用 reactjs）

这是从后端获取数据的代码

const getAllPostInfo = async () => {
setLoading();
if (localStorage.token) {
  setToken(localStorage.token);
}
try {
  const res = await axios({
    method: "GET",
    url: "/api/post",
  });
  // console.log(`getting all post`, res.data.status[0].posts);
  const resData = res.data.status[0].posts;
  dispatch({ type: GET_ALL_POSTS, payload: resData });
} catch (err) {
  console.log(err.response);
  dispatch({ type: POST_ERRORS, payload: err.response.errors });
}

};

这是减速器动作代码

   case GET_ALL_POSTS:
  console.log("action payload in post reducer", action.payload);
  return {
    ...state,
    post_info: action.payload,
    post_loading: false,
    errors: null,
  };

反应代码 - 获取单个帖子并显示

 const PostItem = ({ post }) => {

const { title, imageUrl, description } = post; …… }

下图，可以看到正在获取的帖子...（在浏览器中反应 puglin）但图像不显示...我不明白我哪里出错了...

Answer 1

问题是您的图像被存储为文件路径而不是文件名。您需要删除 imageUrl 数据点中文件名之前的“images/”。