Изображение не загружается при передаче в реакции - PullRequest
Новая
       61

Изображение не загружается при передаче в реакции

0 голосов
/ 01 апреля 2020

У меня проблема с ссылкой, не загружающей мое изображение, когда я передаю реквизит атрибуту sr c из img. Я попытался обернуть require () вокруг моих ссылок, и это не сработало.

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

Поэтому Есть ли способ загрузить изображение с помощью реквизита внутри атрибута sr c?

Я использую NODE_PATH = src /

Спасибо за помощь! 

export const productLib = [{
    ID: "001",
    name:"product name",
    src: "lib/productLib/img/product_name",
    color: "",
    ...
    }, {...}]
import React from 'react';

export class Products extends React.Component {
    render() {
        return(
            <div className="products">
                <img src={this.props.product.src} width="50" />
                <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6>
            </div>
        )
    }
}

Ответы [ 2 ]

1 голос
/ 01 апреля 2020

В соответствии с рекомендациями Xuscrus, я связал свои изображения, используя путь publi c. Мне пришлось удалить абсолютный путь, чтобы это решение работало.

Я переместил все свои изображения в папку с именем "img" в папке publi c моего приложения create-реагировать-приложение.

С примером, использованным в моем первоначальном утверждении, вот самое простое решение, которое я нашел: 

import React from 'react';

export class Products extends React.Component {
    render() {
        return(
            <div className="products">
                <img src={`/img/${this.props.product.src}.png`} width="50" />
                <h6>{this.props.product.name}<span className={`block ${this.props.product.color}`}></span></h6>
            </div>
        )
    }
}

Моим основным источником информации для моего решения был этот пост (метод URL в правильном ответе):

Как создавать изображения Dynami c в ReactJS?

0 голосов
/ 01 апреля 2020

Я думаю, что проблема связана с тем, как вы отправляете URL-адрес компоненту.

"lib / productLib / img / product_name" не является URL-адресом, а также не относительным URL-адресом.

Вы можете использовать импорт, чтобы получить изображение. 

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;

Если вы используете приложение-создание-реагирование

, они решат проблему для вас: https://create-react-app.dev/docs/adding-images-fonts-and-files/

...