JavaScript แสดงรูปภาพบนเว็บไซต์ ด้วย innerHTML และ src

สอนเขียนภาษา JavaScript แสดงรูปภาพบนเว็บไซต์ ด้วยคำสั่ง innerHTML และ src โดยตัวอย่างจะแนะนำวิธีการแสดงรูปภาพ 2 ตัวอย่าง คือ การใช้คำสั่ง innerHTML และการใช้คำสั่ง src สำหรับแสดงรูปภาพ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่างที่ 1 JavaScript แสดงรูปภาพบนเว็บไซต์ ด้วย innerHTML

<script>
    window.onload = function(e) {
        document.getElementById("img").innerHTML = "<img src='https://www.devdit.com/favicon-16x16.png'/>";
    };
</script>

<div id="img"></div>

JavaScript แสดงรูปภาพบนเว็บไซต์ ตัวอย่างใช้คำสั่ง innerHTML เพื่อแทรกแท็ก img ของภาษา HTML ลงไปใน div img เพื่อแสดงรูปภาพบนหน้าเว็บไซต์

ตัวอย่างที่ 2 JavaScript แสดงรูปภาพบนเว็บไซต์ ด้วยการกำหนด src ให้แท็ก img

<script>
    window.onload = function(e) {
        document.getElementById("img").src = "https://www.devdit.com/favicon-16x16.png";
    };
</script>

<img id="img">

JavaScript แสดงรูปภาพบนเว็บไซต์ ตัวอย่างอ้างถึง div img ของแท็ก img ภาษา HTML และใช้คำสั่ง src เพื่อกำหนดที่อยู่ของรูปภาพที่ต้องการแสดงบนหน้าเว็บไซต์