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

私の答えは基本的にルブゼンのそれに非常に似ています。画像をオブジェクト値として使用しています。私には2つのバージョンが機能します。

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

または

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

ラッパーなし-しかし、それもまた別のアプリケーションです。

私は「インポート」ソリューションもチェックしましたが、いくつかのケースでは機能します（驚くべきことではありませんが、ReactのパターンApp.jsに適用されています）が、上記のケースではそうではありません。

それには2つの方法があります。

最初

クラスの上に画像をインポートし、次の<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" /> 
  }
}

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/

これを実装する別の方法を見つけました（これは機能コンポーネントです）。

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

それが役に立てば幸い！