Динамическая загрузка местоположения изображения из файла JSON - (Не удается найти модуль...) React, Next.js
Я пытаюсь динамически загрузить информацию из этого файла JSON и подключить ее к компоненту.
{
"team": [
{
"id": "",
"name": "",
"role": "",
"bio": "",
"major": "",
"image": "akh.jpg"
},
{
"id": "",
"name": "",
"role": "",
"bio": "",
"major": "",
"image": "chr.jpg"
}
]
}
Расположение моего кода — /pages/about/index.js, а мой файл JSON — /pages/about/about.json.
То, как я разбираю код, выглядит так:
var data = require('./about.json')
var teams = data['team'];
<ul>
{teams.map((person) => {
var basePath = "/public/images/profiles/";
var loc = require(basePath + person.image);
return <ProfileCard key = {person.id} id = {person.id} name = {person.name} role = {person.role} major = {person.major} image = {loc} />
})}
</ul>
Компонент находится в том же файле. Я прикрепляю только элемент img из профиля, так как остальные работают нормально.
<img className = "" src = {require(props.image)}></img>
Если я уберу элемент img или вставлю реальный путь, он отлично работает, но этот способ не работает. Единственный похожий пост, который я смог найти, был этот, но на него так и не ответили. StackOverflow: динамический импорт изображения (React Js) (требуется путь img, не удается найти модуль)
Обновленный код 1:
<ul>
{teams.map((person) => {
var basePath = "/public/images/profiles/";
return <ProfileCard
key = {person.id}
id = {person.id}
name = {person.name} r
role = {person.role}
major = {person.major}
image = {`${basePath}/${person.image}`} />
})}
</ul>
И компонент теперь такой после удаления require().
<img src = {props.image}></img>
Обновленный код 2: Перешел на next/image с img и все работает! Пришлось убрать последний / и все заработало.
Ответы 1
В NextJS изображения обслуживаются из / (root), поэтому вам не нужно использовать public в своем пути или использовать require в этом отношении. Просто создайте стандартную строку. Это должно быть так же просто, как...
import aboutJson from './about.json'
const teams = aboutJson[teams]
const basePath = '/images/profiles/'
const Teams = () => (
<ul>
{teams.map((person) => <ProfileCard
key = {person.id}
id = {person.id}
name = {person.name}
role = {person.role}
major = {person.major}
image = {`${basePath}/${person.image}`}
/>
)}
</ul>
)
const ProfileCard = ({ image, ...props }) => <img src = {image} />
Кроме того, next предоставляет свой собственный компонент изображения:
import Image from 'next/image'
const ProfileCard = ({ image, ...props }) => <Image src = {image} />
Можете ли вы опубликовать свой обновленный код? Кроме того, я обновил свой пример, чтобы удалить public.
Также обновлен компонентом next/image.
Удалил /public и require() и обновил пост. Все еще не работает. Компонент next/image еще не пробовал, но выглядит многообещающе.
Это сработало после того, как я удалил лишний / в конце basePath. Спасибо!
Это может быть признаком основной проблемы, потому что, когда я удаляю требование, изображения вообще не загружаются. Я получаю квадратный символ «изображение не найдено».