Lorem ipsum แบบรูปภาพก็มีนะ...

lorem-ipsum-for-photo
lorem-ipsum-for-photo

Lorem แบบตัวอักษรก็มีแล้ว ใครว่าจะไม่มี Lorem แบบรูปละ? ตอนผมทำเว็บในช่วงแรกเวลาเลือกรูปมาใส่เพื่อให้เห็นโครงเว็บขึ้นมาก่อนนั้นจะมีความต้องการแบบนี้

  • อยากได้รูปที่มีขนาดตามต้องการได้เลย เช่น 300x300 หรือ 1280x768 เป็นต้น
  • อยากได้รูปภาพที่สื่อออกมาได้ใกล้เคียงกับสิ่งที่อยากได้ เช่น แนวธรรมชาติ แนวทะเล เป็นต้น

นั้นเละ ผมเลยลองค้นหาคำว่า Lorem image ดูเล่นๆ ก็เจอกับเว็บ picsum.photos

ซึ่งมันตอบโจทย์ที่ผมต้องการเลย วิธีใช้ก็คือ

สมมติอยากได้รูปที่มีขนาด 200x300 px ก็แค่ใส่ image url ว่า https://picsum.photos/200/300 มันก็จะสุ่มรูปออกมาให้ในขนาดนี้เลย

<img src="https://picsum.photos/200/300" />

หรือ อยากรูปสัตว์ก็กำหนด id ให้เลย https://picsum.photos/id/1020/200/300 เพียงเท่านั้นเราก็จะได้รูปสัตว์ที่มีขาด 200x300 px ละ

ลองเข้าไปงานดูนะ มันทำให้ชีวิตผมง่ายขึ้นเยอะเวลาต้องการ mock รูปขึ้นมาเพื่อแสดงในหน้าเว็บ