Next.js: импорт изображений в компонент

Question

Я использую "next": "^9.4.4",И имеют: "next-images": "^1.4.0", "next-optimized-images": "^2.6.1",

А это мой next-config.js

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const optimizedImages = require('next-optimized-images');

module.exports = withImages(
  optimizedImages(
    withCSS(
      withSass({
        target: 'serverless',
        env: {
          MAPBOX_ACCESS_TOKEN:
            'TK421'
        },

        webpack(config, options) {
          config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
              loader: 'url-loader',
              options: {
                limit: 100000,
                target: 'serverless'
              }
            }
          });

          return config;
        }
      })
    )
  )
);

Но в моем компоненте я получаю неработающую ссылку на изображение. Это мой компонент:

import { useState, useEffect } from 'react';

import { Card, Icon, Image, Segment, Form } from 'semantic-ui-react';

import axios from 'axios';


function ImageUploader({ userAvatar }) {
  var [userAvatar, setUserAvatar] = useState(userAvatar);


  useEffect(() => {
    setUserAvatar(userAvatar);
  }, [userAvatar]);

  function fileUploader(e) {
    console.log('event fileUploader ', e);
    var imageFormObj = new FormData();

    console.log('e.target.files[0] ', e.target.files[0]);

    imageFormObj.append('imageName', 'multer-image-' + Date.now());
    imageFormObj.append('imageData', e.target.files[0]);
    setUserAvatar(window.URL.createObjectURL(e.target.files[0]));

    console.log('userAvatar ', userAvatar);
    console.log('imageFormObj ', imageFormObj);

    axios
      .post(`/users/uploadmulter`, imageFormObj)
      .then(data => {
        if (data.data.success) {
          alert('Image has been successfully uploaded using multer');
        }
      })
      .catch(err => {
        alert('Error while uploading image using multer');
      });
  }

  return (
    <>
          <Image
            src={require('../../public/static/uploads/profile-avatars/placeholder.jpg')}
            alt="user-avatar"
          />
    </>
  );
}

Я тоже смущен, потому что в документах, похоже, указано, что статические файлы / изображения поддерживаются из коробки...

Обслуживание статических файлов Next.js может обслуживать статические файлы, например изображения, в папке с именем public в корневом каталоге. Затем ваш код может ссылаться на файлы внутри общедоступных файлов, начиная с базового URL-адреса (/).

Например, если вы добавите изображение в public/my-image.png, следующий код получит доступ к изображению:

Я пробовал, как они рекомендуют:

<Image src="/uploads/profile-avatars/placeholder.jpg" alt="user-avatar" />

И самое смешное, что я не понимаю 404 в браузере!

Любая помощь будет оценена по достоинству!

Answer 1

Ваше изображение должно находиться в папке с зарезервированным именем public. Тогда предложение из коробки сработает.