Компонент React с путем к изображению JSON

У меня есть компонент реакции, который извлекает некоторые данные из локального файла 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>
  )
}

экспортировать релизы по умолчанию;

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

themollusk 01.05.2018 12:49

да, они являются локальными для файловой системы, поэтому им потребуется require. просто не знаю, как это сделать, используя приведенный выше синтаксис :(

Timmy Lee 01.05.2018 15:08
Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
1
2
2 850
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не зная подробностей того, чего вы пытаетесь достичь, я думаю, вы можете сделать следующее:

Поскольку вы предоставляете пути в своем 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 »:(

Timmy Lee 01.05.2018 15:56

ОК! делал что-то не так с путями! это работает! спасибо: D

Timmy Lee 01.05.2018 16:02

Другие вопросы по теме