how to display dynamic <img src> on webpage

Question

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.

could give me the names of jquery packages so i can try to research? thanks — icantcode
– icantcode, Commented Jul 31, 2019 at 12:50
with jquery you can do simply $('img').src('your image src') — Devsi Odedra
– Devsi Odedra, Commented Jul 31, 2019 at 13:01
Where's the code that generates the given markup? As far as I see, there is no problem with the snippet you've shared — Nico Haase
– Nico Haase, Commented Jul 31, 2019 at 13:08

Matus · Accepted Answer · 2019-07-31 12:52:47Z

1

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);

answered Jul 31, 2019 at 12:52

Matus

1,41913 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

icantcode Over a year ago

do u mean i need to put this whole thing in the output like this? "<script>var yourImage = document.createElement("img"); yourImage.src = "some/dynamic/source.jpg" document.body.append(yourImage);</script>"

Matus Over a year ago

I mean this is a way to display dynamic <img src> on webpage. You just need to edit the "some/dynamic/source.jpg" to your image URL. Also, it is JavaScript code so yes it has to be wrapped in <script> tag

Prabhjot Singh Kainth · Accepted Answer · 2019-11-08 13:03:22Z

0

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" });
 });

answered Nov 8, 2019 at 13:03

Prabhjot Singh Kainth

1,8712 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

how to display dynamic <img src> on webpage

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related