Импортировать локальное изображение из объекта в React - PullRequest
Новая
       2

Импортировать локальное изображение из объекта в React

0 голосов
/ 05 мая 2020

Попытка импортировать изображение в компонент React. Он работает, если я напрямую ссылаюсь на файл. Но нет, если я вызываю это из объекта. Я пробовал использовать require () и варианты {}, но сейчас просто догадываюсь.

Это работает: 

import React from 'react';
import './Thumb.css';

const thumbObject = {
    imageSrc: './Angelica05.jpg',
    filename: 'Angelica05.jpg'
}

class Thumb extends React.Component {
    render () {
        return (
            <div className="thumbbox">
                <div className="thumbimage">
                    <img src={require('./Angelica05.jpg')} alt=''/>
                </div>
                <h2>{thumbObject.filename}</h2>
            </div>
        )
    }
} 

export default Thumb;

Это не работает 

import React from 'react';
import './Thumb.css';

const thumbObject = {
    imageSrc: './Angelica05.jpg',
    filename: 'Angelica05.jpg'
}

class Thumb extends React.Component {
    render () {
        return (
            <div className="thumbbox">
                <div className="thumbimage">
                    <img src={require(thumbObject.imageSrc)} alt=''/> //This is the line I can't get working.
                </div>
                <h2>{thumbObject.filename}</h2>
            </div>
        )
    }
} 

export default Thumb;

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

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

Проверьте это. { ссылка }

0 голосов
/ 05 мая 2020

Вы можете попробовать: 

import thumbObject from './Angelica05.jpg'

... (in your code)

<img src={thumbObject} />

Надеюсь, это поможет!

...