Jak odwołać się do lokalnego obrazu w React?

Jak mogę załadować obraz z lokalnego katalogu i dołączyć go do reactjs img srctagu?

Mam obraz o nazwie one.jpegw tym samym folderze co mój komponent i próbowałem obu <img src="one.jpeg" />i <img src={"one.jpeg"} />wewnątrz mojej renderfunkcji, ale obraz się nie pojawia. Nie mam również dostępu do webpack configpliku, ponieważ projekt jest tworzony za pomocą oficjalnego narzędzia create-react-appwiersza poleceń.

Aktualizacja: to działa, jeśli najpierw zaimportować obraz z import img from './one.jpeg'i użyć go do środka img src={img}, ale mam tak wiele plików graficznych do importu i dlatego chcę je wykorzystać w formie img src={'image_name.jpeg'}.

Przede wszystkim zawiń src {}

Następnie, jeśli używasz Webpack; Zamiast: <img src={"./logo.jpeg"} />

Może być konieczne użycie require:

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

Inną opcją byłoby najpierw zaimportowanie obrazu jako takiego:

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

lub ...

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

następnie podłącz go ...

<img src={logo} />

Polecam tę opcję, zwłaszcza jeśli ponownie używasz źródła obrazu.

Najlepszym sposobem jest najpierw zaimportowanie obrazu, a następnie użycie go.

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

Musisz zawinąć ścieżkę źródła obrazu w {}

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

Musisz użyć, requirejeśli używaszwebpack

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

W folderze publicznym utwórz folder zasobów i odpowiednio umieść ścieżkę obrazu.

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

najlepszym sposobem na zaimportowanie obrazu jest ...

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

Masz na to dwa sposoby.

Pierwszy

Zaimportuj obraz na górze klasy, a następnie odwołaj się do niego w swoim <img/>elemencie w ten sposób

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

druga

Można bezpośrednio określić ścieżkę obrazu z wykorzystaniem require('../pathToImh/img')w <img/>elemencie jak ta

import React, { Component } from 'react'; 

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

Moja odpowiedź jest w zasadzie bardzo podobna do odpowiedzi Rubzena. Używam obrazu jako wartości obiektu, przy okazji. U mnie działają dwie wersje:

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

lub

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

Bez opakowań - ale to też inna aplikacja.

Sprawdziłem też rozwiązanie "import" i w kilku przypadkach działa (co nie jest zaskakujące, to jest stosowane we wzorcu App.js w Reakcie), ale nie w przypadku jak mój powyżej.

Znalazłem inny sposób na zaimplementowanie tego (jest to element funkcjonalny):

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

Mam nadzieję, że to pomoże!

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

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

Użyłem tego sposobu i działa ... Mam nadzieję, że będziesz przydatny.

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

eksportuj domyślny obraz

Jak niektórzy wspomnieli w komentarzach, możesz umieścić obrazy w folderze publicznym. Jest to również wyjaśnione w dokumentacji Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/