0

in my backend I am using Multer to save images in my server. They are saved in my images folder:

With react, I try to recover these images. I have the URL of the image in my props (mediaURL is http://localhost:4200/images/1635506218497.png) and so I do a src={mediaURL} but it does not display the image to me, only the alt attribute.

So I try to hand write the absolute path to the image or the relative path, but I have an error: "Module not found: You attempted to import ../../../../ ../../back-end/images/1635506218497.png which falls outside of the project src / directory. Relative imports outside of src / are not supported. "

Same thing if I try to import the image via a module.

This is my front : enter image description here

How do I display my image?

I don't know if it's related but when I type http: // localhost: 4200 / images / 1635506218497.png in my browser, I have a "Cannot GET /images/1635506218497.png" but my backend is running on port 4200.

vincent05996
  • 131
  • 1
  • 11
  • Anyone can help ? :/ – vincent05996 Oct 29 '21 at 22:30
  • 1
    The issue is not with React. If you can't request the image directly via the URL, the issue must be with the backend. If your backend was serving the image successfully, your React would work as far as I can tell. – Dean James Oct 29 '21 at 22:57
  • 1
    Are you using the `static` middleware ? https://stackoverflow.com/questions/10434001/static-files-with-express-js – Antonio Pantano Oct 29 '21 at 23:02
  • Hi, thanks for your help. Indeed, the problem was in Node, in fact, i wasn't using static middleware. so i put app.use('/images', express.static(path.join(__dirname, 'images'))); in my app.js and everything works. Thanks ! – vincent05996 Oct 30 '21 at 09:32

1 Answers1

1

Well, i just forgotten to use static middleware in my app.js.

app.use('/images', express.static(path.join(__dirname, 'images')));

Now its work

vincent05996
  • 131
  • 1
  • 11