Question

我想建立一个允许用户输入问题的网站，然后该网站将显示一些与用户输入有关的图片

我试图将输出包装在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代码。

Answer 1

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

示例：

body{
  height:1500px;
}


.curriculum{
    max-width:700px;
    padding:20px;
    margin: 0 auto;
    border:2px solid black; 
}

/*---------- animation -----------------*/


@-webkit-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }


.animate {

    -webkit-transition: 2s ease-in-out;
    transition: 2s ease-in-out;

    -moz-animation: fadeIn ease-in 1;
    -webkit-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;


    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -animation-duration: 1s;

}

.testing2.animate{
    color:red;
    -webkit-transform: translate(3em,0);
    -moz-transform: translate(3em,0);
    transform: translate(3em,0);
 }

Answer 2

这非常简单，只需尝试以下更改：

为您的img标签添加id属性：

FROM

在Jquery中：

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

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

2 个答案: