无法从反应应用程序访问快速服务器中的 public 文件夹

Question

问题

渲染保存在后端（使用 express）的图像的路径时，我在浏览器中看到一个损坏的图像。我知道有类似的问题，但没有一个能为我解决问题。

详情

我在 server.ts 文件运行 http://localhost:5000 中有这个：

import express from 'express';
export const app = express();
require('dotenv').config();
import cookieParser from 'cookie-parser';

import path from 'path';
const pathToFile = path.resolve(__dirname, './public');

import cors from 'cors';
const corsOptions = {
  credentials: true,
  origin: 'http://localhost:3000',
}

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(pathToFile));
app.use(cors(corsOptions));

我在 http://localhost:3000 中的一个 React 应用程序组件运行上有这个：

{petToRender.petPicture &&
<img
src={`http://localhost:5000/${petToRender.petPicture.replace(/\/g, "/").replace('public/','')}`}
/>}

我在没有 .replace('public/','') 的情况下也尝试过，但它也不起作用。

更多参考和检查

petToRender.petPicture 在 mongoDB 上的数据看起来像屏幕截图显示的那样并且已正确获取：

图片上传到./public/images正确使用multer:

在浏览器的控制台上 - 我得到：

GET http://localhost:5000/images/61b3441440535e9b69a74356.jpg 404 (Not Found)

当我直接输入图片时link控制台也显示如下：

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAA...' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback

Answer 1

关注@Molda 的评论 -

我改为 const pathToFile = path.resolve(__dirname, '../public');（又加了一个 '.'），图片加载正确！

无法从反应应用程序访问快速服务器中的 public 文件夹

Not able to access public folder in express server from a react app

node.js

typescript

express

content-security-policy

transpiler

问题

详情

更多参考和检查