如何在 JQuery 脚本中使用图像 URL？答案

【问题标题】：How do I use an image URL in a JQuery script?如何在 JQuery 脚本中使用图像 URL？
【发布时间】：2014-12-09 16:49:08
【问题描述】：

我现在有这段代码来替换点击时的一些文本，但是符号太大了，我尝试了其他较小的符号并且大小不一致。如何在其中放置图像链接而不是符号？

我想将 u25b2 和 u25bc 替换为图片 url 的...

 $("#button").click(function() {
if ($(this).is(':checked')) {
$("#label").text("\u25b2 close");
} else {
$("#label").text("\u25bc click for details");
}
});
$("#button2").click(function() {
if ($(this).is(':checked')) {
$("#label2").text("\u25b2 close");
} else {
$("#label2").text("\u25bc click for details");
}
});
$("#button3").click(function() {
if ($(this).is(':checked')) {
$("#label3").text("\u25b2 close");
} else {
$("#label3").text("\u25bc click for details");
}
});

【问题讨论】：

标签： jquery image function button click

【解决方案1】：

您可以创建一个图像对象并插入它：

var img = new Image();
img.src = "http://whatever.com/myimage.jpg";
$("#label2").empty().append(img);

您可以通过 CSS 和 font-size 在纯 CSS 中或通过在特定对象上使用 jQuery 的 .css("font-size", xxx); 来控制正在使用的符号的大小，而不是使用图像。一般来说，如果字体能解决您的问题，它比使用图像要好（更少的带宽、更少的加载资源、更少的内存消耗、无限可扩展至任何大小等...）。

【讨论】：

【解决方案2】：

您还可以使用此代码构建图像元素并将其附加到任何其他元素。

var img = $("<img>").attr("src", "http://cdn.wallpapers.com/Images/WallPapers/previews/tn_lakesidefireworks.jpg"); // you can also add other attr here like img.attr("key","val");

$("#lbl").empty().append(img);

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

【讨论】：