Блог

Я пытаюсь создать компонент сетки изображений, данные для изображений поступают из файла конфигурации json.

Этот файл содержит пути (пути относительно public/ всех моих изображений public/img/ ) к изображениям , которые должна отображать сетка, что-то вроде:

 "imgsSrc": [
  "home/1.png",
  "home/2.png",
  "home/3.png",
  "home/4.png"
],
 

А затем визуализируется с помощью:

 export default function ImagesGrid({ fields }) {
  const { imgsSrc, imgsAlt } = fields;

  return (
      {imgsSrc.map((src, i) => (
        <Image
          key={i}
          src={`/img/imgsSrc[i]}
          alt={imgsAlt[i]}
        />
      ))}
  );
}
 

Проблема в том, что, когда я делаю это таким образом, Next жалуется, что Image у него нет ширины и высоты.

Если я напрямую импортирую изображения, это работает без указания ширины и высоты, но это не работает для меня, потому что я хочу, чтобы мой компонент был повторно использован.

Как я могу заставить его работать с путями к изображениям, предоставляемым в качестве опоры для строкового пути?

Почему я хочу это сделать? Так что я могу сделать изображение отзывчивым, потому что до сих пор я давал их ширины и высоты вместе с исходным путь, но я только что понял, что этот подход не работает, за отзывчивость и просто остановиться в фиксированных измерений, если я не хватает чего-то еще о том, как Image компонент должен быть использован в данном случае, как я могу решить эту проблему?