บทนำ
เมื่อพัฒนาเว็บแอปพลิเคชันด้วย React เราต้องการรวมองค์ประกอบภาพเพื่อดึงดูดความสนใจของผู้ใช้ องค์ประกอบภาพเหล่านี้อาจเป็นรูปภาพประเภทใดก็ได้ รวมถึง JPG, PNG, SVG, GIF และอื่นๆ อีกมากมาย
ในบทความนี้ เราจะเรียนรู้วิธีนำเข้ารูปภาพด้วย React และดูวิธีต่างๆ ที่สามารถทำได้
รูปภาพภายนอกและรูปภาพในเครื่องเป็นรูปภาพสองประเภทที่เราต้องการใช้ในแอปพลิเคชัน React ของเรา บทความนี้เกี่ยวข้องกับรูปภาพในท้องถิ่นเป็นหลัก เนื่องจากรูปภาพภายนอกไม่ต้องการให้เรานำเข้ารูปภาพเหล่านั้น
รูปภาพภายนอกคือรูปภาพที่โฮสต์ไว้ภายนอกแล้ว และทุกคนสามารถเข้าถึงได้ผ่าน URL ในขณะที่รูปภาพในเครื่องคือรูปภาพที่มีให้ใช้งานเฉพาะในคอมพิวเตอร์หรือโฟลเดอร์โครงการของเราเท่านั้น และเราต้องการใช้ในแอปพลิเคชันของเรา
วิธีแสดงรูปภาพที่โฮสต์ภายนอก
ก่อนที่เราจะพูดถึงวิธีการนำเข้ารูปภาพ สิ่งสำคัญคือต้องเข้าใจว่ารูปภาพที่โฮสต์อยู่ที่อื่นทำงานในลักษณะเดียวกับที่เราใช้รูปภาพใน HTML เสมอ โดยการเพิ่ม URL ลงใน src คุณลักษณะของ img แท็ก:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
ตอนนี้มาเรียนรู้ว่าเราจะนำเข้ารูปภาพ (ในเครื่อง) ด้วย React ได้อย่างไร!
วิธีการนำเข้ารูปภาพด้วย React
นอกเหนือจากอิมเมจภายนอกแล้ว วิธีการใช้อิมเมจใน React นั้นแตกต่างอย่างมากจากเฟรมเวิร์กอื่นๆ หรือแม้แต่ HTML รูปภาพเหล่านี้ต้องนำเข้ามาที่ React ก่อนจึงจะสามารถใช้ในแอปพลิเคชันของเราได้
สามารถทำได้สองวิธี: โดยใช้ import คำสั่งหรือโดยใช้ require() การทำงาน. เราจะพูดถึงทั้งสองวิธี
วิธีการนำเข้ารูปภาพด้วย React โดยใช้ นำเข้า คำแถลง
เพราะอ่านเข้าใจง่ายกว่า import คำสั่งเป็นวิธีที่ใช้บ่อยที่สุดในการนำเข้ารูปภาพที่เก็บไว้ในเครื่อง React ภาพได้รับการปฏิบัติเช่น การส่งออกเริ่มต้นและเมื่อเรานำเข้า เราทำในลักษณะเดียวกับที่เรานำเข้าส่วนประกอบ ทำได้โดยการระบุพาธสัมพัทธ์จากไฟล์ไปยังรูปภาพที่เรากำลังนำเข้า:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
ในโค้ดด้านบน เรายังคงใช้ img แท็กและ src คุณลักษณะ แต่คราวนี้ src แอตทริบิวต์รับตัวแปรแทนที่จะเป็นสตริง ซึ่งส่งผ่านโดยใช้วงเล็บปีกกาใน JSX
หมายเหตุ เราสามารถนำเข้ารูปภาพได้มากเท่าที่ต้องการ แต่รูปภาพแต่ละรูปต้องมีชื่อที่ไม่ซ้ำกันในคำสั่งนำเข้า มิฉะนั้นจะเกิดข้อผิดพลาด
สิ่งสำคัญคือต้องเข้าใจวิธีการระบุและรับพาธสัมพัทธ์สำหรับไฟล์ มิฉะนั้น ข้อบกพร่องและข้อผิดพลาดอาจเกิดขึ้น ในตัวอย่างก่อนหน้านี้ รูปภาพถูกบันทึกไว้ใน an /src/images.
วิธีการนำเข้ารูปภาพด้วย React โดยใช้ฟังก์ชัน require()
พื้นที่ require() ฟังก์ชั่นคือฟังก์ชัน Node.js ที่ใช้ในการรวมโมดูลภายนอกจากไฟล์อื่นที่ไม่ใช่ไฟล์ปัจจุบัน มันทำงานในลักษณะเดียวกับ import คำสั่งและช่วยให้เราสามารถรวมภาพ:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
ข้อแตกต่างเพียงอย่างเดียวคือบรรทัดแรกที่เราต้องการรูปภาพผ่านเส้นทางสัมพัทธ์แล้วเก็บไว้ในตัวแปรที่เราเข้าถึงใน img แท็กผ่านวงเล็บปีกกา
นอกจากนี้เรายังสามารถตัดสินใจทำแบบอินไลน์นี้และหลีกเลี่ยงบรรทัดพิเศษที่ใช้กำหนดรูปภาพให้กับตัวแปร เนื่องจากไม่ได้บังคับ:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
สรุป
เราเรียนรู้วิธีนำเข้ารูปภาพในเครื่องโดยใช้ import คำสั่งและ require() ฟังก์ชั่นในบทความนี้
