如何在网页上显示动态 <img src>答案

【问题标题】：how to display dynamic <img src> on webpage如何在网页上显示动态 <img src>
【发布时间】：2019-07-31 12:41:48
【问题描述】：

我想做一个允许用户输入问题的网站，然后网站会显示一些与用户输入相关的图片

我试图将输出包装在 img src 标签中，但是输出只是一行代码而不是图片

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

如何让网站将其识别为图片并显示？

是否可以将此功能扩展为嵌入 youtube 视频等？

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

在下面添加了一些脚本，我猜这是将输出限制为仅文本的代码.....

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

更新：我将$row.text(text);修改为$row.html(text);，现在可以正常显示html代码了。

【问题讨论】：

可以用jquery/javascript设置动态src。
可以给我 jquery 包的名称，以便我可以尝试研究吗？谢谢
使用 jquery 你可以简单地做到$('img').src('your image src')
生成给定标记的代码在哪里？据我看，你分享的sn-p没有问题

标签： javascript html css

【解决方案1】：

您可以使用 ParentNode.append() 函数将新的图像元素附加到您的 html 中。（此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append）

例子：

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

【讨论】：

你的意思是我需要像这样把整个东西放在输出中吗？ ""
我的意思是这是一种在网页上显示动态的方法。您只需将“some/dynamic/source.jpg”编辑为您的图像 URL。此外，它是 JavaScript 代码，所以是的，它必须包含在中

【解决方案2】：

很简单，试试下面的改动：

将 id 属性添加到您的 img 标签：

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

在 Jquery 中：

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

【讨论】：