การเพิ่มรูปภาพลงใน Modal ReactJS

ฉันกำลังพยายามแทรกและจัดรูปแบบรูปภาพในโมดอลของฉัน แต่ฉันประสบปัญหาในการทำเช่นนั้น ฉันได้ลองล้อมรูปภาพไว้ใต้ div แล้วใช้คุณสมบัติกับ div นั้น แต่ดูเหมือนว่าจะไม่ทำงานเช่นกัน ฉันได้สร้างลิงก์ไปยังแซนด์บ็อกซ์ของฉันแล้ว: https://codesandbox.io/s/react-modal-rx1dz?file=/src/App.js

ขอบคุณ!


person lanceljr    schedule 25.06.2021    source แหล่งที่มา


คำตอบ (1)


แทนที่จะใช้สตริงธรรมดา คุณต้องอ้างอิงรูปภาพโดยใช้ require

<img src={require('./modal.jpg')} />

คุณยังสามารถใช้ import

import img from "./modal.jpg"; 
<img src={img} />

ฉันยังเปลี่ยนสไตล์เล็กน้อยเพื่อให้พอดีกับ div

https://codesandbox.io/s/react-modal-forked-mpkzm

person Apostolos    schedule 25.06.2021
comment
โอ้ ภาพด้านข้างของฉันดูดี แต่ฉันสงสัยว่าจะจัดสไตล์ให้ถูกต้องได้อย่างไร เพราะไม่ว่าจะใช้ CSS อะไรก็ตาม ดูเหมือนจะไม่มีผลกระทบใดๆ เลย - person lanceljr; 25.06.2021
comment
โอเค เพราะในภาพแซนด์บ็อกซ์ไม่ปรากฏเลย ดังนั้นคุณจึงจัดให้พอดีกับกล่องโต้ตอบ เพื่อให้พอดีกับความกว้างและความสูง? - person Apostolos; 25.06.2021
comment
ใช่แล้ว ฉันกำลังพยายามแยกโมดอลออกเป็นซ้ายและขวา โดยที่ด้านซ้ายจะแสดงรูปภาพ แต่คุณสมบัติ css ทั้งหมดที่ฉันใช้ดูเหมือนจะไม่ทำงาน มันจะใช้งานได้เฉพาะเมื่อฉันตรวจสอบองค์ประกอบด้วยตนเองและนำไปใช้เท่านั้น - person lanceljr; 25.06.2021
comment
แทนที่จะใช้สไตล์โดยตรงใน App.js เป็นไปได้ไหมที่จะทำบนหน้า scss - person lanceljr; 25.06.2021
comment
โอเค ขอฉันตรวจสอบหน่อย ตอนนี้ฉันได้รับสิ่งที่คุณต้องการบรรลุแล้ว - person Apostolos; 25.06.2021
comment
ใช่แล้ว เนื่องจากรูปภาพถูกรวมไว้ภายใต้ Modal และดูเหมือนว่าฉันไม่พบชื่อคลาสเริ่มต้นของ Modal - person lanceljr; 25.06.2021
comment
ตรวจสอบลิงค์อีกครั้ง - person Apostolos; 25.06.2021
comment
โอเค ฉันรู้แล้วว่าจะต้องทำยังไงต่อไป ขอบคุณ! คุณรู้วิธีจัดสไตล์ไอคอน 'x' เป็นปุ่มปิดหรือไม่? - person lanceljr; 25.06.2021
comment
ตรวจสอบไอคอนที่นี่ w3schools.com/charsets/ref_utf_dingbats.asp ถ้าคำตอบของฉันแก้ปัญหาของคุณได้ อย่าลืมยอมรับมัน ขอบคุณ! - person Apostolos; 25.06.2021