Как импортировать изображение (.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 также не дает мне никакой ошибки. Пожалуйста, что-нибудь помогает. Я новичок, чтобы реагировать и не могу понять, что я делаю не так.

Ответ 1

попробуйте использовать

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>
    );
  }
}

Ответ 2

Вы также можете использовать require для рендеринга изображений, таких как

//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>
    );
  }
}

Ответ 3

Если изображения находятся внутри папки 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>
        )
    } 
}

Ответ 4

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;

Ответ 5

Решил проблему, когда переместил папку с изображением в папку src. Затем я обратился к изображению (проект, созданный с помощью "create-реагировать-приложение")
let image = document.createElement("img"); image.src= require ('../assets/Police.png');

Ответ 6

Это может быть полезно для некоторых новичков, так как я сам и смущающе не заметил этого: нам нужно включить "Image" в метод импорта в самом начале кода.

Так:

import { StyleSheet, Text, View, Image} from 'react-native';

Надеюсь, это поможет некоторым людям.