CODEWITHSUNDEEP
javascripthtmlcss
icantcode
icantcode

Reputation: 162

how to display dynamic <img src> on webpage

i want to make a website that allow users to input questions, and then the website will display some pictures related to user input

i tried to wrap the output in img src tag, however the output is simply a line of code instead of picture

<img src="path/reply.jpg" width="68" height="90" alt="reply">

how can i tell the website to recognize it as a picture and display it ?

is it possible to extend this function to embed youtube video etc. ?

==================================================================

Added some scripts below, i guess this is the code that limiting output as text only.....

 function createRow(text) {
        var $row = $('<li class="list-group-item"></li>');
        $row.text(text);
        $chatlog.append($row);
      }

Update: i amended $row.text(text); to $row.html(text); , it can properly display html code now.

Upvotes: 0

Views: 1805

Answers (2)

Prabhjot Singh Kainth
Prabhjot Singh Kainth

Reputation: 1861

It is very simple, just try the following changes:

Add id attribute to your img tag:

<img src="path/reply.jpg" width="68" height="90" alt="reply" id="img1">

And in Jquery:

 $(document).ready(function () 
 {
    $("#img1").attr({ "src": "img.jpg" });
 });

Upvotes: 0

Matus
Matus

Reputation: 1418

you can use ParentNode.append() function to append new image element to your html. (documentation here: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append)

Example:

var yourImage = document.createElement("img");
yourImage.src = "some/dynamic/source.jpg"
document.body.append(yourImage);

Upvotes: 1

Related Questions