Передача локального пути к файлу изображения через значение объекта в React prop не работает? - PullRequest
Новая
       20

Передача локального пути к файлу изображения через значение объекта в React prop не работает?

0 голосов
/ 09 мая 2019

У меня есть файл, который содержит массив объектов со значениями: 

{
  id: .., 
  image: "require('./React.png')",
  name: ...,
  description:...,
  technology:..,
},

Значение image содержит путь к файлу изображения, который я хотел бы использовать в качестве строки.Изображение находится в том же каталоге, что и мой компонент и объектный файл.

Когда я деструктурирую опоры, я могу передать значения id, name, description и technology моемукомпонент, и они отображаются в приложении нормально.Когда я размещаю опору изображения внутри атрибута источника изображения в теге изображения, изображение не отображается.(Я использую JSX)

Я попытался передать изображение, например: {this.props.image} / {props.image}, но безрезультатно.

Последний тег P содержит то же самое изображение, которым я являюсьпытаясь передать мой источник изображения, и он отображает маршрут к моему файлу в виде строки: "require('./React.png')".Так что я знаю, что реквизит правильно обращается к значению объекта.Атрибут источника изображения просто по какой-то причине подходит.Любая помощь будет оценена.Спасибо. 

const ProjectCard =({image, name, description, technolgy})=>{

  return(

    <div className='pa3 dib br2 ma2 bw2 shadow-5 grow tc'>

      <img src={{image}} style={{width:"60px", height:"60px"}} alt='logo'/>

      <div>
        <h2>{name}</h2>
        <p>{description}</p>
        <p>{technolgy}</p>
        <p>{image}</p>
      </div>
    </div>

1 Ответ

0 голосов
/ 09 мая 2019

Ну, вы буквально написали строку с содержанием "require('./React.png')", что означает, что оно будет передано вашему <img> компоненту как свойство src.Поскольку строка не является допустимым URL-адресом, ничего не будет отображаться.Возможно, ваш браузер отобразит ошибку.

У вас есть два варианта.Либо вы модифицируете строку, чтобы она являлась правильным URL, удалив require из строки;например, вы измените его на "./React.png".Но тогда вам нужно настроить свой бэкэнд так, чтобы он действительно обслуживал это изображение.

Второй вариант - импортировать это изображение из вашего кода javascript в переменную и передать его в свойство src вашего <img>tag.

Например, вот так: 

import reactImage from './React.png';

const ProjectCard =({name, description, technolgy})=> (
  <div className='pa3 dib br2 ma2 bw2 shadow-5 grow tc'>
    <img src={{reactImage}} style={{width:"60px", height:"60px"}} alt='logo'/>
    <div>
      <h2>{name}</h2>
      <p>{description}</p>
      <p>{technolgy}</p>
      <p>{image}</p>
    </div>
  </div>
);

Но здесь есть подвох.Так как похоже, что вы пытаетесь отображать изображения динамически, я бы посоветовал вам воспользоваться опцией 1, а НЕ делать изображения частью вашего пакета заранее.Делайте это только с изображениями, которые являются фиксированной частью вашего приложения, такими как значки или логотип.

Динамические (контентные) изображения должны подаваться с веб-сервера.

...