CODEWITHSUNDEEP
javascriptjquerynode.js
Thomas Degroot
Thomas Degroot

Reputation: 524

How to display image href from db collection as an actual image

I using jQuery to access an image href in database collection i.e https://somesite/img/somePhoto.png and then display this in a divtag.

I have made it to the point where I can display the text of the href, but I now want to take this a step further and actually display the image itself.

.html(message.media) is the element I am trying to display as an image

Here is the code so far

groupManager.prototype.displayChatMessage = function( message ){
    var _this = this;
    $('<li/>')
        .attr("id",message._id)
        .text(message.message) //message text
        .html(message.media) // https://somesite/img/somePhoto.png
        .prepend($("<strong />").text(message.fromName+': '))
        .appendTo($('#messagesDiv'));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};

Upvotes: 0

Views: 67

Answers (3)

Sudhanshu Jain
Sudhanshu Jain

Reputation: 534

you can try this hope it will work.

groupManager.prototype.displayChatMessage = function( message ){
   var _this = this;
   var html = '<li id="'+ message._id +'">';
   html += '<p>'+ message.message +'</p>'; // you can use different tag.
   html += '<img src="' + message.media + '" />';
   html += '<strong >' + message.fromName + '</strong>';
   html += '</li>';
   $('#messagesDiv').append(html);
   $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};

Upvotes: 1

Abdul Rafay
Abdul Rafay

Reputation: 312

check below example

var _this = this;
message = {message: 'abc', media: 'http://www.lets-develop.com/wp-content/uploads/2014/10/How-to-change-img-src-with-jQuery-change-img-url.jpg', fromName: 'ans'}
    $('<li/>')
        .attr("id",message._id)
        .text(message.message) //message text
        .html('<img src="'+message.media+'">') // https://somesite/img/somePhoto.png
        .prepend($("<strong />").text(message.fromName+': '))
        .appendTo($('#messagesDiv'));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagesDiv">

</div>

Upvotes: 0

Josh
Josh

Reputation: 1474

If you have the href value, add it to the href <a href=""></a>.

Example:

$('a').attr('href', 'YOUR HREF VALUE');

Upvotes: 0

Related Questions