React & Node (Multer): изображение не найдено по пути, пока оно существует на этом пути

Question

привет, у меня есть функция загрузки изображений на моем сайте, и она загружается в специальную папку с NodeJS (Express) и Multer , но проблема в том, что когда пользователь загружает это изображение, он перенаправляется на только что созданный маршрут ина этом маршруте изображение должно отображаться, но оно даже не думает, что оно существует, вот код мультитера:

const imgStorageBaseURL = '/images'
const imgStoragePath = path.join(__dirname, '..', 'images');
const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    const userPath = path.join(imgStoragePath, req.userId);
    fs.mkdir(
      userPath,
      () => callback(null, userPath)
    )
  },


  filename: (req, file, callback) => {
    const filenameParts = file.originalname.split('.');
    const ext = filenameParts.pop();
    const basename = filenameParts.join('.');
    const additionalPath = Date.now() + '' +  Math.floor(Math.random() * (2000 - 500)) + 500;
    callback(null, basename + '-' + additionalPath + '.' + ext);
  }
})

, а вот массив ссылок этого изображения (чтобы сохранить эти ссылки в дБ)

 var imgarray = []
 req.files.forEach((file) => {
    imgarray.push(imgStorageBaseURL + '/' + req.userId + '/' + file.filename)
    console.log(imgarray)
})

и код реакции

     {this.state.imageURLs.map((src, k)=>{
         return (
             <img src={src} key={k} alt="Hey" className="img"/>
         )
     })}

есть источник в элементе проверки

и вот доказательствоэто изображение существует на этом пути

, но когда я посещаю этот URL в источнике, я получаю это

в чем причина этого недоразумения?

Спасибо!

Answer 1

Несмотря на то, что изображение существует в файловой системе в порядке, оно неправильно размещено "относительно" по отношению к веб-серверу, т.е. к вашему приложению React.

Обычно изображения размещаются в отдельных областях, предназначенных длястатические файлы. Если вы использовали create-react-app для создания своего приложения, к ним можно получить доступ из папки 'public'

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Вот ссылка на официальные документы .

В частности, вы должны обновить свой код реакции на:

 {this.state.imageURLs.map((src, k)=>{
     return (
         <img src={process.env.PUBLIC_URL +src} key={k} alt="Hey" className="img"/>
     )
 })}

Просто переместите изображения или обновите путь, по которому изображения сохраняются из multer / express, в общую папку.