Як я можу посилатись на локальне зображення в 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"} />

Можливо, вам потрібно буде використовувати:

<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" /> 
  }
}

Моя відповідь в основному дуже схожа на відповідь Рубцена. Я використовую зображення як значення об'єкта, btw. Для мене працюють дві версії:

{
"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/