的jQuery

Question

我有这个代码：它是SPAN或DIV：带有ID我从DB获取了图像URL。

<span id="cover">http://server.com/images/file.png</span>

但我想在图片中显示该网址。像这样：

<img src="http://server.com/images/file.png" alt="">

我怎样才能得到它？它可以使用JavaScript / jQuery等。

非常感谢。

Answer 1

我在下面创建了一个函数，它接受一个目标元素ID并用<img>替换该元素，其中图像src取自目标元素文本。应该适用于<span>和<div>代码。

function replaceImage(id) {
  var target = $("#" + id);
  var src = target.text();
  target.after('<img src="' + src + '" alt="' + src + '" />');
  target.remove();
}

$(document).ready(function() {
  replaceImage("cover");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="cover">http://lorempixel.com/400/200</span>

Answer 2

您可以将图片标记放在范围内，也可以放置id =＆＃34; cover＆＃34;在图像中，span和image标签都是内联元素，并且在布局方面表现相似。

<img id="cover" src="http://server.com/images/file.png" alt="">

或

<span id="cover">
 <a href="http://server.com/images/file.png">
   <img src="http://server.com/images/file.png" alt="">
 </a>
</span>

Answer 3

的jQuery

我不太确定你在问什么。您是否希望在不在本地托管的范围内显示图像？

<span id="cover">
    <a href="http://server.com/images/file.png">
        <img src="http://server.com/images/file.png" alt="">
    </a>
</span>

您想以编程方式添加图片吗？

$('#cover > a').append('<img src="http://server.com/images/file.png" alt="">');

将范围内容（图像网址）更改为图像（显示）

3 个答案:

的jQuery