Как мне сослаться на локальное изображение в React?

Как я могу загрузить изображение из локального каталога и включить его в reactjs img srcтег?

У меня есть изображение, которое вызывается one.jpegв той же папке, что и мой компонент, и я попробовал и то, <img src="one.jpeg" />и другое <img src={"one.jpeg"} />в своей renderфункции, но изображение не отображается. Кроме того, у меня нет доступа к webpack configфайлу, так как проект создается с помощью официального create-react-appутилиты командной строки.

Обновление: Это работает , если я первый импортировать изображение с import img from './one.jpeg'и использовать его внутри img src={img}, но у меня есть так много файлов изображений для импорта и , следовательно, я хочу , чтобы использовать их в виде, img src={'image_name.jpeg'}.

Прежде всего, заверните Src в {}

Тогда, если вы используете Webpack; Вместо того: <img src={"./logo.jpeg"} />

Возможно, вам понадобится использовать require:

<img src={require('./logo.jpeg')} />

Другой вариант - сначала импортировать изображение как таковое:

import logo from './logo.jpeg'; // with import

или ...

const logo = require('./logo.jpeg); // with require

затем подключите его ...

<img src={logo} />

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

Лучший способ - сначала импортировать изображение, а затем использовать его.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

Вы должны обернуть свой путь источника изображения в {}

<img src={'path/to/one.jpeg'} />

Вы должны использовать, requireесли используетеwebpack

<img src={require('path/to/one.jpeg')} />

Внутри общей папки создайте папку ресурсов и разместите путь к изображению соответственно.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

лучший способ для импорта изображения ...

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

У вас есть два способа сделать это.

Первый

Импортируйте изображение поверх класса, а затем ссылайтесь на него в вашем <img/>элементе, как это

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
} 

второй

Вы можете прямо указать путь к изображению , используя require('../pathToImh/img')в <img/>элементе , как это

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

Мой ответ в основном очень похож на ответ Рубцена. Я использую изображение в качестве значения объекта, кстати. У меня работают две версии:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

или

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

Без обертки - но это тоже другое приложение.

Я проверил также «импорт» решение, и в некоторых случаях оно работает (что неудивительно, что применяется в паттерне App.js в React), но не в том случае, как мое выше.

Я нашел другой способ реализовать это (это функциональный компонент):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

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

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

Я использовал этот способ, и он работает ... Надеюсь, вам пригодится.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

экспорт изображения по умолчанию

Как уже упоминалось в комментариях, вы можете поместить изображения в общую папку. Это также объясняется в документации Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/