ReactJS และรูปภาพในโฟลเดอร์สาธารณะ

ฉันใหม่ใน ReactJS และฉันต้องการนำเข้าภาพในส่วนประกอบ รูปภาพเหล่านี้อยู่ในโฟลเดอร์สาธารณะและฉันไม่รู้วิธีเข้าถึงโฟลเดอร์จากคอมโพเนนต์การตอบสนอง

ความคิดใด ๆ ?

แก้ไข

ฉันต้องการนำเข้ารูปภาพภายใน Bottom.js หรือ Header.js

โฟลเดอร์โครงสร้างคือ:

ฉันไม่ได้ใช้ webpack ฉันควร ?

แก้ไข 2

ฉันต้องการใช้ webpack เพื่อโหลดรูปภาพและเนื้อหาที่เหลือ ดังนั้นในโฟลเดอร์ config ของฉันฉันมีไฟล์ถัดไป:

ฉันต้องเพิ่มเส้นทางของรูปภาพที่ไหนและทำอย่างไร

ขอบคุณ

ในการอ้างอิงภาพในที่สาธารณะมีสองวิธีที่ฉันรู้ว่าจะทำอย่างไรให้ตรงไปตรงมา หนึ่งเหมือนข้างต้นจากโฮมัมบาห์รานี

โดยใช้

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

และเนื่องจากการทำงานนี้คุณไม่ต้องการสิ่งอื่นใดเลย แต่มันก็ใช้ได้เช่นกัน ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

คุณไม่จำเป็นต้องกำหนดค่า webpack สำหรับสิ่งนี้ ..

ในส่วนประกอบของคุณเพียงแค่ระบุเส้นทางรูปภาพ โดยค่าเริ่มต้นการตอบสนองจะทราบในไดเรกทอรีสาธารณะ

<img src="/image.jpg" alt="image" />

เอกสารตอบกลับอธิบายสิ่งนี้อย่างดีในเอกสารคุณต้องใช้process.env.PUBLIC_URLกับภาพที่อยู่ในโฟลเดอร์สาธารณะ ดูข้อมูลเพิ่มเติมได้ที่นี่

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- เป็นการดีถ้าคุณใช้ webpack สำหรับการกำหนดค่า แต่คุณสามารถใช้เส้นทางรูปภาพและตอบสนองจะพบว่าอยู่ในไดเรกทอรีสาธารณะ

<img src="/image.jpg">

2- หากคุณต้องการใช้ webpack ซึ่งเป็นแนวทางปฏิบัติมาตรฐานใน React คุณสามารถใช้กฎเหล่านี้ในไฟล์ webpack.config.dev.js ของคุณ

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

จากนั้นคุณสามารถนำเข้าไฟล์รูปภาพในส่วนประกอบปฏิกิริยาและใช้งานได้

import image from '../../public/images/logofooter.png'

<img src={image}/>

เรารู้ว่า React คือ SPA ทุกอย่างแสดงผลจากองค์ประกอบรากโดยขยายเป็น HTML ที่เหมาะสมจาก JSX

ดังนั้นจึงไม่สำคัญว่าคุณต้องการใช้ภาพที่ใด แนวทางปฏิบัติที่ดีที่สุดคือใช้เส้นทางสัมบูรณ์ (อ้างอิงถึงสาธารณะ) ไม่ต้องกังวลเกี่ยวกับเส้นทางสัมพัทธ์

ในกรณีของคุณสิ่งนี้ควรใช้ได้ทุกที่:

"./images/logofooter.png"

คุณควรใช้ webpack ที่นี่เพื่อทำให้ชีวิตของคุณง่ายขึ้น เพิ่มกฎด้านล่างในการกำหนดค่าของคุณ:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

หลังจากนี้คุณสามารถนำเข้าภาพไปยังส่วนประกอบการตอบสนองของคุณ:

import myImage from 'publicfolder/images/Image1.png'

ใช้ myImage ดังนี้:

<div><img src={myImage}/></div>

หรือหากรูปภาพถูกนำเข้าสู่สถานะของส่วนประกอบในเครื่อง

<div><img src={this.state.myImage}/></div> 

คุณยังสามารถใช้สิ่งนี้ .. ได้โดยสมมติว่า 'yourimage.jpg' อยู่ในโฟลเดอร์สาธารณะของคุณ

<img src={'./yourimage.jpg'}/>