将跨度内容(图像url）转换为图像(显示）

Changin span content (image url) to a image (display)

本文关键字：图像 转换 显示 url      更新时间：2023-12-30

我有这样的代码：它是一个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等是可能的

非常感谢。

我在下面创建了一个函数，它获取目标元素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>

您可以将image标签放在span中，也可以将id="cover"放在图像中，因为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>
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="">');
相关文章：