Як імпортувати зображення (.svg, .png) у компонент React

Я намагаюся імпортувати файл зображення в один із компонентів реакції. У мене налаштування проекту з веб-пакетом

Ось мій код компонента

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

Ось моя структура проекту.

Я налаштував свій файл webpack.config.js наступним чином

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS. Я можу отримати зображення з будь-якого іншого віддаленого джерела, але не з локально збережених зображень. Консоль JavaScript також не видає помилок. Будь ласка, що-небудь допоможе. Я зовсім новачок у реагуванні і не можу зрозуміти, що я роблю не так.

спробуйте використовувати

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

Ви можете використовувати також вимагати, щоб зробити зображення, як

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

Якщо зображення знаходяться всередині папки src / assets, ви можете використовувати requireправильний шлях у інструкції require,

var Diamond = require('../../assets/linux_logo.jpg');

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits


class App extends React. Component{
    constructor(props){
     super(props)
     this.state={
      imagesrc=imagename // as it is imported
     }
   }

   render(){
       return (

        <ImageClass 
        src={this.state.imagesrc}
        />
       );
   }
}

class ImageClass extends React.Component{
    render(){
        return (

            <img src={this.props.src} height='200px' width='100px' />
        );
    }
}

export default App;

Я також мав подібну вимогу, коли мені потрібно імпортувати зображення .png. Я зберігав ці зображення у загальній папці. Тож такий підхід для мене спрацював.

<img src={process.env.PUBLIC_URL + './Images/image1.png'} alt="Image1"></img> 

На додаток до вищезазначеного, я спробував використовувати також, і це також працювало для мене. Я включив зображення до папки "Зображення" у каталозі src.

<img src={require('./Images/image1.png')}  alt="Image1"/>

Вирішено проблему при переміщенні папки із зображенням у папку src. Потім я звернувся до зображення (проект, створений через "create-response-app")
let image = document.createElement ("img"); image.src = require ('../ assets / police.png');

Простий спосіб - використання location.origin
поверне ваш домен,
наприклад
http: // localhost: 8000
https://yourdomain.com

потім зв’яжіться з рядком ...
Насолоджуйтесь ...

<img src={ location.origin+"/images/robot.svg"} alt="robot"/>

Більше зображень?

var images =[
"img1.jpg",
"img2.png",
"img3.jpg",
]

images.map( (image,index) => (

  <img key={index} 
       src={ location.origin+"/images/"+image} 
       alt="robot"
  />
) )