ฉันจะอ้างอิงภาพท้องถิ่นใน 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" /> 
  }
}

คำตอบของฉันนั้นคล้ายกับ Rubzen มาก ฉันใช้ภาพเป็นค่าวัตถุ 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/