การใช้งานรูปภาพ

wave
มานพ กองอุ่น 11 เม.ย. 2016, 16:55:58 4,275

บ่อยครั้งใน Application เราได้มีการใช้งานรูปภาพดังนั้นเราควรที่จะมาเรียนรู้ในเรื่องของการใช้งานรูปภาพกันนะครับ ซึ่งรูปภาพนั้นเป็นส่วนหนึ่งของ Helper CHtml::image() โดยเป็นตัวช่วยที่จะ Generate ออกมาให้อยู่ในรูป HTML ที่เป็น Tag img โดยสามารถดูเพิ่มเติมได้ที่

http://www.yiiframework.com/doc/api/1.1/CHtml#image-detail


    สำหรับการใช้งานนั้นจะมี Class Reference ดังนี้ public static string image(string $src, string $alt='', array $htmlOptions=array ( )) โดยมี
$src คือ ที่อยู่ของรูปภาพ
$alt คือ ข้อความเมื่อนำ Mouse ไปวาง หรือเมื่อไม่มีรูปภาพก็จะแสดงข้อความนี้
$htmlOptions คือ การกำหนด Attribute อื่นๆ เช่น class, width, height เป็นต้น
    ใน Root ของเว็บไซต์เรามี Folder เก็บรูปภาพชื่อ myyiiapp/img/ และมีไฟล์รูปภาพชื่อ image.png ใน Yii Framework เราสามารถอ้างอิงไปยัง Application Base Path โดยใช้คำสั่งดังนี้ Yii::app()->baseUrl 
 

ตัวอย่างการใช้งาน

การใช้งานพื้นฐาน

echo CHtml::image(Yii::app()->baseUrl.'/img/image.png');


รูปภาพกับ ALT
หากมีการใส่ Attribute alt ก็จะกำหนดดังนี้
 

echo CHtml::image(Yii::app()->baseUrl.'/img/image.png','ทดสอบ ALT');


จะได้ผลลัพท์ดังนี้
 

<img src="APPLICATION_BASE_PATH/img/image.png" alt="ทดสอบ ALT" />


รูปภาพกับขนาด
ทดลองเพิ่มความกว้างและความสูงของรูปภาพ
 

echo CHtml::image(Yii::app()->baseUrl.'/img/image.png','ทดสอบ ALT',array('width'=>'100px','height'=>'80px'));


จะได้ผลลัพท์ดังนี้
 

<img src="APPLICATION_BASE_PATH/img/image.png" alt="ทดสอบ ALT" width="100px" height="80px" /> 


 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 4,275
  • รักเลย 0
  • หมวดหมู่ Tip Yii Framework (Yii1)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง