Я не могу отображать изображения с помощью reactjs

Чтобы отобразить изображение в React js, у вас есть два простых способа сделать это.

1. импортировать изображение
2. Используйте URL-адрес изображения, которое находится на удаленном или локальном сервере.

Пример 1

Нам просто нужно импортировать изображение в наш компонент, т.е.

import React, { Component } from 'react';
//Aqui importamos nuestra imagen
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        {/*Y en la etiqueta img simplemente la mostramos*/}
        <img src={logo} />
      </div>
    );
  }
}

export default App;

В примере 1 действительно не имеет значения, в какой папке хранится изображение.

Пример 2:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        {/*Aqui utilizamos la url donde esta alojada la imagen*/}
        <img src="https://hdwallpaperim.com/wp-content/uploads/2017/08/25/461264-reactJS-Facebook-JavaScript-minimalism-artwork-simple_background-748x421.jpg" />
      </div>
    );
  }
}

export default App;

В вашем случае, когда у вас есть компонент изображения, вы передаете ему атрибут src, и я понимаю, что позже в этом компоненте вы будете использовать его для поиска изображения.

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

Родительский компонент

import React, { Component } from 'react';
{/*Importamos nuestro componente Image*/}
import Image from './Image';

{/*Importamos la imagen que le vamos a pasar a nuestro componente hijo*/}

import logo from './logo.svg'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      {/*Renderizamos nuestro componente y le pasamos la imagen importada*/}
        <Image src={logo} />
      </div>
    );
  }
}

export default App;

Затем в нашем дочернем компоненте нам просто нужно получить указанное изображение с помощью реквизита .

import React, { Component  } from 'react';


class Image extends Component{


  render() {

    return(
      {/*Mostramos la imagen que nos viene del componente padre, en la etiqueta*/}
      <img src={this.props.src} />
    )
  }
}

export default Image;

Вот код для тестирования.

ДЕМО

Я надеюсь, что это помогло вам.

Ваше здоровье!!!

В ответ вы не можете ничего импортировать за пределы папки src.

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

const image = 'images/image.jpg'

Таким образом, он ищет папку с изображениями внутри общей папки.

Если вы хотите импортировать их как таковые, а не сохранять путь к константе, вы должны поместить папку с изображениями в папку src.

если вы хотите сохранить папку с ресурсами в src, а также динамически загружать изображения в компонент, вы можете использовать require.context() . require.context из веб-пакета

const cargarImagen = require.context("./tu_patch_assets", true);

<img src={cargarImagen(`./${ nombre_imagen }.jpg`)} alt={nombre_imagen} />

Вы также должны быть осторожны с домашней страницей, указанной в package.json. Если у вас есть билет:

homepage: /subdomain

, вы должны указать свой src:

src={"./subdomain/"+filename+".jpg"}

На самом деле некоторые комментарии выше неверны. Если вы можете поместить ресурсы изображения в общую папку только для их вызова, вы не должны размещать ../ для выхода из каталога, вы должны размещать его, например, только обычным способом.

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

(правильный способ) = { }

(неверно) = { }