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

บ่อยครั้งใน 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" />