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

นี่คือสถาปัตยกรรมไฟล์ของฉัน:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

อย่างไรก็ตามฉันตระหนักว่าเส้นทางถูกสร้างขึ้นบน url ในองค์ประกอบหนึ่งของฉัน (ตัวอย่างเช่นใน file1.jsx) ฉันมีสิ่งนี้:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

เป็นไปได้อย่างไรที่จะแก้ปัญหานี้? ฉันต้องการให้ในรูปแบบของเส้นทางใด ๆ ที่จัดการโดย react-router ภาพทั้งหมดสามารถแสดงด้วยเส้นทางเดียวกัน

คุณกำลังใช้ url สัมพัทธ์ซึ่งสัมพันธ์กับ url ปัจจุบันไม่ใช่ระบบไฟล์ คุณสามารถแก้ไขปัญหานี้ได้โดยใช้ URL ที่สมบูรณ์

<img src ="http://localhost:3000/details/img/myImage.png" />

แต่นั่นไม่ดีสำหรับเมื่อคุณปรับใช้กับ www.my-domain.bike หรือไซต์อื่น ๆ จะเป็นการดีกว่าที่จะใช้ url ที่สัมพันธ์กับไดเรกทอรีรากของไซต์

<img src="/details/img/myImage.png" />

ในcreate-react-appเส้นทางสัมพัทธ์สำหรับรูปภาพดูเหมือนจะไม่ทำงาน คุณสามารถนำเข้ารูปภาพแทนได้:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

หากคุณใช้ create-react-app เพื่อสร้างโครงการของคุณโฟลเดอร์สาธารณะของคุณจะสามารถเข้าถึงได้ ดังนั้นคุณต้องเพิ่มimageโฟลเดอร์ของคุณในโฟลเดอร์สาธารณะ

ประชาชน / images /

<img src="/images/logo.png" />

ด้วยcreate-react-appมีประชาชนโฟลเดอร์ (กับindex.html ... ) หากคุณวาง "myImage.png" ไว้ที่นั่นให้พูดใต้โฟลเดอร์ย่อยimgจากนั้นคุณสามารถเข้าถึงได้ผ่าน:

<img src={window.location.origin + '/img/myImage.png'} />

1. สร้างโฟลเดอร์รูปภาพภายใน src (/ src / images) และเก็บภาพของคุณไว้ในนั้น จากนั้นนำเข้าภาพนี้ในส่วนประกอบของคุณ (ใช้เส้นทางสัมพัทธ์ของคุณ) ชอบด้านล่าง -

   import imageSrc from './images/image-name.jpg';

   แล้วในส่วนประกอบของคุณ

   <img title="my-img" src={imageSrc} alt="my-img" />

2. อีกวิธีหนึ่งคือเก็บภาพไว้ในโฟลเดอร์สาธารณะและนำเข้าโดยใช้เส้นทางสัมพัทธ์ สำหรับสิ่งนี้ให้สร้างโฟลเดอร์รูปภาพในโฟลเดอร์สาธารณะและเก็บภาพของคุณไว้ในนั้น จากนั้นในส่วนประกอบของคุณให้ใช้ดังต่อไปนี้

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   ทั้งสองวิธีใช้งานได้ แต่ขอแนะนำวิธีแรกเนื่องจากวิธีที่สะอาดกว่าและรูปภาพจะถูกจัดการโดย webpack ในช่วงเวลาสร้าง

ในกรณีของฉันรหัสต่อไปนี้ก็ใช้ได้เช่นกัน

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

คำตอบเก่า ๆ บางคำใช้ไม่ได้ผลคำตอบอื่นดี แต่จะไม่อธิบายธีมโดยสรุป:

หากรูปภาพอยู่ในไดเรกทอรี "สาธารณะ"

ตัวอย่าง: \public\charts\a.png

ใน html:

<img id="imglogo" src="/charts/logo.svg" />

ใน JavaScript:

สร้างภาพเป็น img ใหม่แบบไดนามิก:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

ตั้งค่ารูปภาพเป็น img ที่มีอยู่โดยใช้ id เป็น 'img1' แบบไดนามิก:

document.getElementById('img1').src = 'charts/a.png';

หากรูปภาพอยู่ในไดเร็กทอรี 'src':

ตัวอย่าง: \src\logo.svg

ใน JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

ใน jsx:

<img src={logo} /> 

การเพิ่มfile-loader npmไปที่ webpack.config.js ตามคำแนะนำการใช้งานอย่างเป็นทางการดังนี้:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

ทำงานให้ฉัน

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

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

และเรียกชื่อภาพบน image src = {RecentProjectImage_3}เป็นวัตถุ

 <Img src={RecentProjectImage_3} alt="" />

เพื่อนคนหนึ่งแสดงวิธีการทำดังนี้:

"./" จะทำงานเมื่อไฟล์ที่ร้องขอรูปภาพ (เช่น "example.js") อยู่ในระดับเดียวกันภายในโครงสร้างแผนผังโฟลเดอร์กับโฟลเดอร์ "images"

วางโลโก้ในโฟลเดอร์สาธารณะของคุณภายใต้เช่น public / img / logo.png จากนั้นอ้างถึงโฟลเดอร์สาธารณะเป็น% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

การใช้% PUBLIC_URL% ในข้างต้นจะถูกแทนที่ด้วย URL ของpublicโฟลเดอร์ในระหว่างการสร้าง เฉพาะไฟล์ภายในไฟล์publicโฟลเดอร์เท่านั้นที่สามารถอ้างอิงได้จาก HTML

ไม่เหมือนกับ "/img/logo.png" หรือ "logo.png" "% PUBLIC_URL% / img / logo.png" จะทำงานได้อย่างถูกต้องทั้งกับการกำหนดเส้นทางฝั่งไคลเอ็นต์และ URL สาธารณะที่ไม่ใช่รูท เรียนรู้วิธีการกำหนดค่าที่ไม่ใช่ราก URL npm run buildสาธารณะโดยการเรียกใช้