Làm cách nào để tham chiếu hình ảnh cục bộ trong React?

Làm cách nào tôi có thể tải hình ảnh từ thư mục cục bộ và đưa nó vào reactjs img srcthẻ?

Tôi có một hình ảnh được gọi one.jpegtrong cùng một thư mục với thành phần của tôi và tôi đã thử cả hai <img src="one.jpeg" />và <img src={"one.jpeg"} />bên trong renderchức năng của mình nhưng hình ảnh không hiển thị. Ngoài ra, tôi không có quyền truy cập vào webpack configtập tin vì dự án được tạo bằng create-react-appdòng lệnh chính thức sử dụng.

Cập nhật: Điều này hoạt động nếu lần đầu tiên tôi nhập hình ảnh import img from './one.jpeg'và sử dụng nó bên trong img src={img}, nhưng tôi có rất nhiều tệp hình ảnh để nhập và do đó, tôi muốn sử dụng chúng trong biểu mẫu , img src={'image_name.jpeg'}.

Trước hết bọc src trong {}

Sau đó, nếu sử dụng Webpack; Thay vì: <img src={"./logo.jpeg"} />

Bạn có thể cần sử dụng yêu cầu:

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

Một tùy chọn khác là trước tiên nhập hình ảnh như sau:

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

hoặc là ...

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

sau đó cắm nó vào ...

<img src={logo} />

Tôi muốn giới thiệu tùy chọn này đặc biệt nếu bạn đang sử dụng lại nguồn hình ảnh.

Cách tốt nhất là nhập hình ảnh trước và sau đó sử dụng nó.

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

Bạn cần phải bọc đường dẫn nguồn hình ảnh của bạn trong {}

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

Bạn cần sử dụng requirenếu sử dụngwebpack

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

Bên trong thư mục công cộng tạo một thư mục tài sản và đặt đường dẫn hình ảnh tương ứng.

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

cách tốt nhất để nhập ảnh là ...

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

Câu trả lời của tôi về cơ bản rất giống với câu trả lời của Rubzen. Tôi sử dụng hình ảnh làm giá trị đối tượng, btw. Hai phiên bản làm việc cho tôi:

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

hoặc là

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

Không có trình bao bọc - nhưng đó cũng là ứng dụng khác nhau.

Tôi cũng đã kiểm tra giải pháp "nhập khẩu" và trong một số trường hợp nó hoạt động (điều không đáng ngạc nhiên, được áp dụng trong mẫu App.js trong React), nhưng không phải trong trường hợp như của tôi ở trên.

Bạn có hai cách để làm điều đó.

Đầu tiên

Nhập hình ảnh trên đầu lớp và sau đó tham chiếu nó trong <img/>phần tử của bạn như thế này

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

Thứ hai

Bạn có thể trực tiếp chỉ định đường dẫn hình ảnh sử dụng require('../pathToImh/img')trong <img/>các yếu tố như thế này

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;

Tôi đã sử dụng cách này, và nó hoạt động ... Tôi hy vọng bạn hữu ích.

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

xuất hình ảnh mặc định

Như một số đề cập trong các ý kiến, bạn có thể đặt hình ảnh vào thư mục công cộng. Điều này cũng được giải thích trong các tài liệu của Tạo-Phản ứng-Ứng dụng: https://create-react-app.dev/docs/USE-the-public-folder/

Tôi tìm thấy một cách khác để thực hiện điều này (đây là một thành phần chức năng):

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

Hy vọng nó giúp!