ប្រការដែលងាយស្រួលបំផុតនោះ គឺការរក្សាទុកបណ្តារូបភាពទាំងឡាយនៅក្នុងថត public ហើយយករូបទាំងនោះមកប្រើនៅក្នុងធាតុ <img/> ដោយផ្តល់តំលៃអោយទៅលក្ខណៈ src ជាផ្លូវទៅកាន់រូបភាពទាំងនោះធៀបនឹងថត public ។
<img src="/images/public-cat.jpg" alt="A sleeping cat.">
យើងក៏អាចយករូបភាពពីគេហទំព័រផ្សេងទៀតមកប្រើនៅក្នុងកម្មវិធី Astro បានដែរ។
<img src="https://example.com/remote-cat.jpg" alt="A sleeping cat.">
ចំពោះរូបភាពដែលស្ថិតនៅក្នុងថតណាមួយដែលថតនោះស្ថិតនៅក្នុងថត src យើងចាំបាច់ត្រូវនាំចូលរូបភាពទាំងនោះជាមុនសិន មុននឹងអាចយកវាមកប្រើប្រាស់បាន។
---
// import local images
import myDog from `../../images/pets/local-dog.jpg`
---
// access the image properties
<img src={myDog.src} width={myDog.width} height={myDog.height} alt="A barking dog." />
រូបភាពយកមកប្រើផ្ទាល់នៅក្នុងធាតុ <img/> មិនបានត្រូវកែច្នៃឬកែលំអរឡើយ គឺត្រូវយកប្រើទាំងដុលតែម្តង។ បើសិនជាយើងចង់អោយមានការលំអរនៃរូបភាពទាំងឡាយដែលត្រូវយកមកប្រើ យើងអាចនាំចូលនូវសមាសភាគមានស្រាប់ <Image/> នៅក្នុងកម្មវិធី Astro មកប្រើជាមួយនឹងរូបភាពទាំងនោះ។
---
// import the Image component and the image
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---
<!-- `alt` is mandatory on the Image component -->
<Image src={myImage} alt="A description of my image." />
ចំពោះរូបភាពស្ថិតនៅក្នុងថត src យើងចាំបាច់ត្រូវនាំចូលរូបភាពទាំងនោះជាមុនសិន មុននឹងអាចរូបភាពទាំងនោះមកប្រើបាន។
---
import { Image } from 'astro:assets';
import myImportedImage from `../assets/my-local-image.png`
---
<Image src={myImportedImage} alt="descriptive text" />
ចំពោះរូបភាពស្ថិតនៅក្នុងថត public អាចត្រូវយកមកប្រើជាមួយនឹងសមាសភាគ <Image/> នេះបាន ដោយផ្តល់អាស័យដ្ឋានដែលជាផ្លូវចូលទៅកាន់រូបភាពទាំងនោះធៀបនឹងថត public អោយដល់លក្ខណៈ src។
---
import { Image } from 'astro:assets';
---
<Image
src="/images/my-public-image.png"
alt="descriptive text"
width="200"
height="150"
/>
ចំពោះរូបភាពដែលស្ថិតលើគេហទំព័រផ្សេងទៀត អាចត្រូវយកប្រើជាមួយនឹងសមាសភាគ <Image/> នេះបាន ដោយផ្តល់អោយលក្ខណៈ src នូវអាស័យដ្ឋានពេញលេញរបស់រូបទាំងនោះ។
---
import { Image } from 'astro:assets';
---
<Image
src="https://example.com/remote-image.jpg"
alt="descriptive text"
width="200"
height="150" />
ក៏ប៉ុន្តែ សំរាប់រូបភាពនៅក្នុងថត public និងរូបភាពនៅលើគេហទំព័រដទៃទៀត សមាសភាគ <Image/> នឺងយករូបទាំងនោះមកប្រើទាំងដុល ដោយគ្មានធ្វើការកែច្នៃអ្វីឡើយ។ មួយវិញទៀត សំរាប់រូបនៅកន្លែងទាំងនោះ យើងចាំបាច់ត្រូវផ្តល់តំលៃសំរាប់លក្ខណៈ width និង height ។
មួយវិញទៀត សមាសភាគ <Image/> ទាមទារចាំបាច់នូវតំលៃសំរាប់លក្ខណៈ alt របស់វានៅគ្រប់ករណីទាំងអស់។ បើយើងមិនចង់ផ្តល់តំលៃអ្វីអោយទៅលក្ខណៈ alt នេះទេ យើងអាចផ្តល់អោយវានូវតំលៃដែលជាកំរងអក្សរទទេមួយ (alt="") ៕
