Question

我使用jQuery访问数据库集合中的图像href，即https://somesite/img/somePhoto.png，然后将其显示在divtag中。

我已经达到了可以显示href文本的程度，但我现在想更进一步，实际显示图像本身。

.html（message.media）是我试图显示为图像的元素

这是迄今为止的代码

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

Answer 1

你可以尝试这个希望它会起作用。

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

Answer 2

如果您有href值，请将其添加到href <a href=""></a>。

示例：

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

Answer 3

检查以下示例

＆＃13;

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;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagesDiv">

</div>

＆＃13;

如何将db collection中的图像href显示为实际图像

3 个答案: