Jquery 如何根据图像是否存在更改图像src
我正在尝试根据系统上是否存在与数据库条目相对应并以id作为其名称的一部分进行标识的图像,加载两个不同缩略图中的一个 为了清晰起见,简化一下,如果名为{id}-thumb.png的特定图像存在,那么我想使用jQuery将其名称加载到HTML的src中。如果图像不存在,我想加载一个名为thumbnail.png的通用缩略图图像 这就是我到目前为止所做的:Jquery 如何根据图像是否存在更改图像src,jquery,ajax,image,src,Jquery,Ajax,Image,Src,我正在尝试根据系统上是否存在与数据库条目相对应并以id作为其名称的一部分进行标识的图像,加载两个不同缩略图中的一个 为了清晰起见,简化一下,如果名为{id}-thumb.png的特定图像存在,那么我想使用jQuery将其名称加载到HTML的src中。如果图像不存在,我想加载一个名为thumbnail.png的通用缩略图图像 这就是我到目前为止所做的: var image_path = id + "-thumb.png"; $.ajax({ url: image_path, typ
var image_path = id + "-thumb.png";
$.ajax({
url: image_path,
type: "HEAD",
error: function() {
$("li#" + id + " .thumbnail").attr("src","thumbnail.png");
},
success: function() {
$("li#" + id + " .thumbnail").attr("src",id + "-thumb.png");
}
});
然后通过构建一个字符串变量list\u item生成要插入的新HTML
var list_item = "<li id='" + id + "'>";
list_item += "<figure>";
list_item += "<img class='thumbnail' src=''></a>";
list_item += "</figure>";
但是我没有得到图像,并且查看生成的HTML,src是空的
任何想法都非常感谢 如果图像不存在,可以使用“onerror”参数。生成图像标记,如下所示:
<img src="something.jpg" onerror="this.src='something_else.jpg'" />
如果图像不存在,可以使用“onerror”参数。生成图像标记,如下所示:
<img src="something.jpg" onerror="this.src='something_else.jpg'" />
默认情况下加载通用thumb,然后加载特定thumb-如果它不存在,则不会加载:
<img src="path/to/generic_thumb.png" data-src="path/to/specific_thumb.png" alt="">
JS
$('img[data-src]').each(function(){
var $self = $(this), specificSrc = $self.data('data-src');
// create an img node, inject the real src attribute...
$("<img />").bind("load", function() {
// ...when it gets loaded [and the resource is thus available],
// set it to the actual DOM img element.
$self.attr('src', specificSrc);
}).attr("src", specificSrc);
});
$('img[data src]')。每个(函数(){
var$self=$(this),specificSrc=$self.data('data-src');
//创建一个img节点,注入真正的src属性。。。
$(“默认情况下加载通用thumb,然后加载特定thumb-如果它不存在,则不会加载:
<img src="path/to/generic_thumb.png" data-src="path/to/specific_thumb.png" alt="">
JS
$('img[data-src]').each(function(){
var $self = $(this), specificSrc = $self.data('data-src');
// create an img node, inject the real src attribute...
$("<img />").bind("load", function() {
// ...when it gets loaded [and the resource is thus available],
// set it to the actual DOM img element.
$self.attr('src', specificSrc);
}).attr("src", specificSrc);
});
$('img[data src]')。每个(函数(){
var$self=$(this),specificSrc=$self.data('data-src');
//创建一个img节点,注入真正的src属性。。。
$(“您没有关闭li
。
动态创建图像名attr(“src”,id+“-thumb.png”)
但你确信这也是磁盘上映像的路径。检查查看您的映像路径并将其添加到src attr是我还是您正在向图片发送ajax请求?使用ajax我认为您可以在服务器端解决问题,这应该更容易您不关闭li
。
您的cr动态创建您的图像名attr(“src”,id+“-thumb.png”)
但你确定这也是磁盘上图像的路径。检查图像路径是否准确,并将其添加到src attr中。是我还是你正在向图片发送ajax请求?使用ajax我认为你可以在服务器端解决问题,这应该更容易,只需输入文本“something\u other.jpg”在页面上-而不是图像本身。这对我来说很好-非常好的简单解决方案-非常感谢。非常好。对我的问题进行了排序。这只是将文本“something_other.jpg”放在页面上-而不是图像本身。这对我来说很好-非常好的简单解决方案-非常感谢。非常好。对我的问题进行了排序。