How to get local images outside of the project?

Question

JavaScript

Hello!
Directory (conditionally):

-папка
  |-проект
    |-dist
    |-public
    |-src
      |-main.js
    |-webpack.config.js
  |-картинки
    |-папка_с 1м_набором
    |-папка_с_2м_набором
    |-папка_с_3м_набором
    |-index.js

In main.js I imported the object(url's) with the картинки/index.js
following картинки/index.jscode:

export default [{
  url: "папка_с_1м_набором/картинка1.png",
},
{
  url: "папка_с_2м_набором/картинка1.png",
},
...]

There is an error in the GET 404 console , about pictures: http;//localhost 3000/folder_with_1m_set/picture1 png

Changing the directory is the latest option. It's just that there is not one project, but most of the pictures are repeated.
Learned about

require.context("../../папка_с_1м_набором/картинка1.png", true, /\.png$/)

But to no avail.

Tell me how to get them?
How to optimize to take url or pictures themselves from one file?

Answer 1

These pictures are not on the server, because no one puts them there. The server ( webpack devserver ) does not work from a local folder, but from a structured folder as described in the build result config. Do a build and look in the dist folder: this is exactly what the file structure on the server looks like.
You can put this image folder there using the copy-webpack-plugin . If this folder is placed on the server manually and in prod. dist you don't need it - you can include this plugin only for develpment.
Alternatively you can set up devserver (using before / after) so that it simply gives the files from this folder upon the appropriate request (reading their contents manually using node fs tools ).
The main thing is not to forget then to put this folder on the server with your hands.