react - Images in public return 404 since added proxy

问题

I set my images inside the public/avatars and render them via <img src='avatars/my-image1.svg' />

my app run on : http://localhost:3001

it works fine, but since I added a proxy inside the package.json:

proxy: http://localhost:3000

the images return 404 (not found)

Does anyone have any idea how to fix it?

回答1:

The solution was to set the proxy for the endpoint via src/setupProxy.js (not via package.json)

and place the following contents in it:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/your_api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
    })
  );
};

link: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

image of full instruction

来源：https://stackoverflow.com/questions/62555666/react-images-in-public-return-404-since-added-proxy