У меня есть компонент реакции, который извлекает некоторые данные из локального файла json. Эти данные содержат ссылки на изображения. Однако изображения не загружаются, хотя пути верны. Раньше я использовал require, но в другой настройке кода. Теперь, когда я перешел на это, изображения не загружаются. Я использую webpack 4, так что я предполагаю, что мне нужно снова потребовать изображения? Как мне это сделать в приведенном ниже заявлении?
часть, которая не работает, - это 'image = {release.imageURL}', который передается в 'src' компонента
import React from "react";
import ReactDOM from "react-dom";
import Release from "./release.js"
import data from "../data/releases.json"
const allReleases = data.map(release => {
return (
<div className = "column-2">
<Release
key = {release.id}
url = {release.releaseURL}
image = {release.imageURL}
cta = {release.cta}
title = {release.title}
artists = {release.artists}
/>
</div>
)
})
const Releases = () => {
return (
<div>
<div className = "row">
<h3>All Releases</h3>
{allReleases}
</div>
</div>
)
}
экспортировать релизы по умолчанию;
да, они являются локальными для файловой системы, поэтому им потребуется require. просто не знаю, как это сделать, используя приведенный выше синтаксис :(
Не зная подробностей того, чего вы пытаетесь достичь, я думаю, вы можете сделать следующее:
Поскольку вы предоставляете пути в своем json, вам нужно будет требовать их динамически.
releases.json
[
{
imageURL: "/image01.jpg"
},
{
imageURL: "/image02.jpg"
},
{
imageURL: "/image03.jpg"
}
]
затем, предполагая, что вы знаете относительный путь к этим изображениям, вы можете потребовать их на своей карте
const allReleases = data.map(release => {
return (
<div className = "column-2">
<Release
url = {require('./path/to/images' + release.imageURL)}
/>
</div>
)
})
В качестве альтернативы вы можете сделать свой releases.json
файлом js
и импортировать туда свои изображения и поместить их в свои данные как переменные.
да .. я попробовал это и получил: «Критическая зависимость: запрос зависимости является выражением» и «Неперехваченная ошибка: не удается найти модуль» / Release / release001 »:(
ОК! делал что-то не так с путями! это работает! спасибо: D
Ваши изображения ссылаются на вашу локальную файловую систему или на URL-адрес? Если они локальные, вам необходимо их потребовать, иначе вы сможете передать строку в атрибут
src
.