天道酬勤,学无止境

Javascript 图像 src 属性返回错误值(Javascript image src attribute returns wrong value)

问题

我有一个小 javascript 代码附加到一个按钮,onclick 到以下代码:

function ondelete () {

    var getDiv = document.getElementById("imgdiv");
    var lb_img = $("#imgdiv").children();
    for (var i = 0; i < lb_img.length; i++) {
        console.log(lb_img[i].src);
    }
}

这将返回一个很棒的输出,这是使用 F12 开发人员工具在 chrome 中打开时相应的 html:

<div id="imgdiv" class="modal-body next">
    <img draggable="false"src="http://(urlfrommywebsite)/A_LANX/get/OTc1/179f42">
</div>

所以代码应该返回那个 src 属性,但它返回

http://127.0.0.1/stage/local/admin/galleries/gallery/2

这是我的网址。 在其他图像上,它返回另一个 img 或同一个 url 的值,真的很奇怪。 这一切都发生在灯箱内,所以没有打开灯箱的正常代码是

<div id="imgdiv" class="modal-body next"></div>

我真的被困在这里,所以一点帮助真的很有用:)

编辑:

到目前为止似乎没有答案有帮助,对其他灯箱有什么建议,可能有像 getImage() 或类似的功能?

psfancybox 对我也不起作用。

回答1

您正在使用此代码来获取图像 url。

<div id="imgdiv" class="modal-body next">
<img draggable="false" src="http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg">

jQuery 代码:

$( document ).ready(function() {
alert($('#imgdiv img').attr('src'));

});

现场演示

回答2

使用 jQuery 的 attr() 获取属性

$("img").attr("src");

相应地编辑选择器

http://jsfiddle.net/b3xdgn83/1

回答3

你可以试试这个:

function ondelete() {

        var lb_img = $("#imgdiv").children();
        for (var i = 0; i < lb_img.length; i++) {
            console.log(lb_img[i].getAttribute("src"));
        }
    }

有关 attr() 和 getAttribute() 的更多信息,请参阅这篇文章:jQuery 的 attr() 和 getAttribute() 之间的区别

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 检查是否使用jQuery加载了图片(没有错误)(Check if an image is loaded (no errors) with jQuery)
    问题 我正在将JavaScript与jQuery库一起使用,以操作无序列表中包含的图像缩略图。 加载映像后,它会做一件事;发生错误时,它会做其他事情。 我正在使用jQuery load()和error()方法作为事件。 在这些事件之后,我检查图像DOM元素中的.complete,以确保在jQuery可以注册事件之前尚未加载图像。 它正常工作,除非在jQuery可以注册事件之前发生错误。 我能想到的唯一解决方案是使用img onerror属性在全局某处(或其自身的节点上)存储“标志”,该标志表示失败,因此jQuery在检查.complete时可以检查该“存储/节点”。 有人有更好的解决方案吗? 编辑:加粗要点,并在下面添加了更多详细信息:我正在检查图像是否完整(也称为已加载),之后在图像上添加了加载和错误事件。 这样,如果图像是在事件注册之前加载的,我仍然会知道。 如果在事件之后未加载图像,则事件将在事件发生时对其进行处理。 问题是,我可以轻松检查图像是否已经加载,但是我无法确定是否发生了错误。 回答1 另一种选择是通过创建内存图像元素并将其src属性设置为原始图像的原始src属性来触发onload和/或onerror事件。 这是我的意思的示例: $("<img/>") .on('load', function() { console.log("image loaded
  • 输入默认图片,以防html的src属性是无效的吗?(Inputting a default image in case the src attribute of an html <img> is not valid?)
    问题 万一src属性无效(仅使用HTML),有什么方法可以在HTML <img>标记中呈现默认图像? 如果没有,那么解决该问题的轻量级方法是什么? 回答1 您要求提供仅HTML的解决方案... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Object Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p> <object data="http://stackoverflow.com/does-not-exist.png" type="image/png"> <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such"> </object> </p> </body> </html> 由于第一个图像不存在,因此将显示后备(此网站上使用的sprites *)。
  • 使用 javascript/jQuery 从 HTML 字符串中获取属性值(Using javascript/jQuery to get attribute values from an HTML string)
    问题 我有一个包含文本和图像的 HTML 字符串,例如 <p>...</p> <img src="..." /> <p>...</p> 我需要获取第一张图片的 src 属性。 图像可能会也可能不会出现在<p>并且可能有多个图像,或者根本没有图像。 最初,我尝试将字符串附加到 DOM 并进行过滤。 但是,如果我这样做,浏览器会请求所有外部资源。 在我的情况下,这会增加很多不必要的开销。 我最初的做法: var holder = $('<div></div>'); holder.html(content); var src = holder.find('img:first').attr('src'); 如何在不附加 HTML 的情况下获取第一张图像的 src? 我需要使用正则表达式,还是有更好的方法? 解决方案需要基于 javascript/jQuery – 我没有使用任何服务器端语言。 我的问题非常类似于:http://forum.jquery.com/topic/parsing-html-without-retrieving-external-resources 谢谢 回答1 这 $("<p><blargh src='whatever.jpg' /></p>").find("blargh:first").attr("src") 返回whatever.jpg所以我想你可以试试 $
  • 如何使用 jQuery 有效地将图像属性“src”从相对 URL 更改为绝对 URL?(How to efficiently change image attribute “src” from relative URL to absolute using jQuery?)
    问题 我需要将 html 图像标记的src从相对 url 更改为绝对 url。 我正在使用以下代码。 urlRelative 和 urlAbsolute 已正确创建,但我无法修改最后一行中的图像。 我的脚本可能有什么问题? ..... // other code here request.done(function(resp) { var imgTags = $('img', resp).each(function() { var urlRelative = $(this).attr("src"); var urlAbsolute = self.config.proxy_server + self.config.location_images + urlRelative; $(this).attr("src").replace(urlRelative, urlAbsolute); // problem here }); 回答1 像这样尝试 $(this).attr("src", urlAbsolute) 回答2 试试$(this).attr("src", urlAbsolute); 回答3 jQuery("#my_image").attr("src", "first.jpg") 回答4 将此代码用于 src $(this).attr("src", urlAbsolute); 演示
  • 使用JavaScript获取图像的实际宽度和高度? (在Safari / Chrome中)(Get the real width and height of an image with JavaScript? (in Safari/Chrome))
    问题 我正在创建一个jQuery插件。 如何在Safari中使用Javascript获得真实的图像宽度和高度? 以下适用于Firefox 3,IE7和Opera 9: var pic = $("img") // need to remove these in of case img-element has set width and height pic.removeAttr("width"); pic.removeAttr("height"); var pic_real_width = pic.width(); var pic_real_height = pic.height(); 但是在Webkit浏览器中,例如Safari和Google Chrome的值为0。 回答1 Webkit浏览器在加载图像后设置height和width属性。 建议不要使用超时,而建议使用图像的onload事件。 这是一个简单的例子: var img = $("img")[0]; // Get my img elem var pic_real_width, pic_real_height; $("<img/>") // Make in memory copy of image to avoid css issues .attr("src", $(img).attr("src")) .load
  • MobileSafari无法通过JavaScript返回正确的图像尺寸信息(MobileSafari not returning the right image size info via JavaScript)
    问题 我在这里有一个针对此问题的HTML测试页。 由于某些原因, Image.width/height会报告任何大于1700像素的图像的Image.width/height属性为其值的一半。 也就是说,JPG的width属性为2000,但是MobileSafari JavaScript将其报告为1000。如果我尝试对1700px宽的图像使用相同的代码,则会得到正确的宽度。 我所做的测试会加载两个图像(不同尺寸的相同图像)并显示JavaScript大小值。 我尝试过: Mac OS X 10.6.8中的Chrome 22,Safari 5.1.7,Firefox 15.0.1(正确大小) iOS Simulator 4.3 SDK 3.2(大小错误) 具有iOS 5.1的iPad 2(尺寸不正确) 装有iOS 5.1的iPhone 4S(尺寸错误) 任何想法为什么会这样? 我在某处缺少设置吗? 为什么它适用于某些图像,但不适用于其他图像? 测试在这里:http://still-island-1941.herokuapp.com/sizetest.html 这是JavaScript代码: var imgBig, imgSmall; function init() { imgBig = new Image(); imgBig.onload = handleBig; imgBig.src
  • 输入类型图像提交表单值?(Input Type image submit form value?)
    问题 我正在使用此代码尝试通过表单提交值,但似乎未提交任何内容... 我通常会使用复选框或单选按钮来显示多个选项,但是我想使用图像来执行此操作。 此代码是否错误? <input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" /> 所以我想在value =“ myValue”中传递值。 表单工作正常,所以这不是问题,我只需要输入部分不提交的帮助,因为我知道这是可行的。 谢谢 回答1 输入type="image"仅将该图像定义为提交按钮,而不定义为可以将值传递给服务器的输入。 回答2 使用type="image"是有问题的,因为禁用了传递值的功能。 尽管它不是可定制的,因此也不是那么漂亮,但是只要它们是type="button"一部分,您仍然可以使用它们。 <button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button> 回答3 我和你在同一个地方,最后我找到了一个简洁的答案: <form action="xx/xx" method="POST"> <input type="hidden" name="what
  • “元素 img 上的属性 src 的错误值:必须为非空”,用于动态生成的 img src(“Bad value for attribute src on element img: Must be non-empty”, for dynamically generated img src)
    问题 我有一个带有图像滑块的网站。 当幻灯片进入视图以加快页面加载速度时,我将一些图像标签留空,因为图像会加载。 图像标签定义如下: <img data-src="img/portfolio-desktop1-small.png" src="" alt=""/> 我正在做的是在幻灯片功能上,我使用 jQuery 动画将src更改为data-src 。 滑块效果很好。 我的问题是当我尝试在 w3c 验证工具中验证它时,它给出了以下错误: 第 131 行,第 179 列:元素img上属性src错误值:必须非空。 ...data-src="img/portfolio-desktop1-small.jpg" src="" alt=""/> URL 的语法: 任何网址。 例如: /hello , #canvas或http://example.org/ 。 > 字符应在 NFC 中表示,空格应转义为%20 。 有没有办法在不改变 JavaScript 或 CSS 的情况下解决这个问题? 如果我就这样离开,这件事可能产生的有害结果是什么? 回答1 如果您只是删除 src 属性,然后在需要时即时添加它,会发生什么情况。 src 属性不是必需的。 在我看来,无论如何我都不会担心 w3c 验证工具会说什么。 只要你在必要的浏览器中测试它并且它工作。 回答2 将图像src属性设置为# : <img
  • img标签的HTML crossorigin属性(HTML crossorigin attribute for img tag)
    问题 我试图了解如何对img标签使用crossorigin属性。 我找不到一个很好的例子(我发现的有关启用CORS的图像的解释是用JavaScript代码解释的,因此我看不到带有img标签的crossorigin属性。 我有一个猜测,如果我理解错误,请更正我的错误。 首先,可以编写以下代码片段以在画布上绘制图像: <canvas id="canvas" width=400 height=400></canvas> <br><br> <img id="image" src="http://...." alt="" width="400" height="400"> <script> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = new Image(); img.crossOrigin = "Anonymous"; img.src = document.getElementById("image").value; context.drawImage(img, 40, 40); } </script> 下面的代码与上面的代码等效吗? 它不包含“ img.crossOrigin”
  • 使用 Javascript 切换图像 src 属性(Toggle image src attribute using Javascript)
    问题 我正在尝试使用 Javascript 更改 HTML 图像src 。 我有两张图片 Plus.gif 和 Minus.gif。我插入了 HTML img标签并编写了一个 Javascript 函数来在单击时更改图像src 。 问题是我想在用户单击图像时再次将其更改回来。 例如,当页面加载时Plus.gif显示,当用户点击它时,它会更改为Minus.gif图像。 我想要这样,当图像是Minus.gif并且用户点击它时,这应该更改为Plus.gif 。 这是我的 Javascript 函数: <script language="javascript" type="text/javascript"> function chngimg() { var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif'; if (img) { document.getElementById('imgplus').src = 'Images/Minus.gif'; } else if (!img) { document.getElementById('imgplus').src = 'Images/Plus.gif'; alert(img); } } </script> 图片标签: <img id="imgplus"
  • Javascript设置img src(Javascript set img src)
    问题 我可能错过了一些简单的东西,但是当您阅读的所有内容都不起作用时,这很烦人。 我的图片在动态生成的页面过程中可能会重复很多次。 因此,显而易见的事情是预加载它,并始终使用该变量作为源。 var searchPic; function LoadImages() { searchPic = new Image(100,100); searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct } 然后我使用设置图像 document["pic1"].src = searchPic; 或者 $("#pic1").attr("src", searchPic); 但是,当我查询[object HTMLImageElement]作为图像的src的图像时,该图像从未在FireBug中正确设置。 在IE中,我得到: http://localhost:8080/work/Sandbox/jpmetrix/[object] 回答1 您应该使用以下命令设置src: document["pic1"].src = searchPic.src; 或者 $("#pic1").attr("src", searchPic.src); 回答2 纯JavaScript来创建img标签并手动add
  • 如果ngSrc路径解析为404,是否有办法回退到默认值?(if a ngSrc path resolves to a 404, is there a way to fallback to a default?)
    问题 我正在构建的应用程序要求用户设置4条信息,然后才能加载该图像。 该图像是应用程序的核心,因此断开的图像链接使整个外观看起来很烦。 我想在404上放另一张图片。 有任何想法吗? 我想避免为此编写自定义指令。 令我惊讶的是,我找不到类似的问题,尤其是当文档中的第一个问题相同时! http://docs.angularjs.org/api/ng.directive:ngSrc 回答1 这是一个非常简单的指令,用于监视加载图像并替换src时的错误。 (插棒) HTML: <img ng-src="smiley.png" err-src="http://google.com/favicon.ico" /> Javascript: var app = angular.module("MyApp", []); app.directive('errSrc', function() { return { link: function(scope, element, attrs) { element.bind('error', function() { if (attrs.src != attrs.errSrc) { attrs.$set('src', attrs.errSrc); } }); } } }); 如果要在ngSrc为空白时显示错误图像,则可以添加以下内容(Plunker):
  • jQuery / JavaScript替换损坏的图像(jQuery/JavaScript to replace broken images)
    问题 我有一个包含一堆图像的网页。 有时,该图像不可用,因此在客户端的浏览器中会显示损坏的图像。 如何使用jQuery获取图像集,将其过滤为损坏的图像然后替换src? -我以为使用jQuery会更容易,但是事实证明,仅使用纯JavaScript解决方案(即Prestaul提供的解决方案)要容易得多。 回答1 处理onError事件以使图像使用JavaScript重新分配其源: function imgError(image) { image.onerror = ""; image.src = "/images/noimage.gif"; return true; } <img src="image.png" onerror="imgError(this);"/> 或没有JavaScript函数: <img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" /> 以下兼容性表列出了支持错误工具的浏览器: http://www.quirksmode.org/dom/events/error.html 回答2 我使用内置的error处理程序: $("img").error(function () { $(this).unbind("error").attr("src", "broken
  • 在Javascript中获取图像的高度/宽度(理想情况下根本不加载图像)(Get height/width of image in Javascript (ideally without loading the image at all))
    问题 抱歉,如果已经回答了,但是我找不到。 我想用Javascript查找图像文件的高度和宽度。 我实际上不需要在页面中显示图像,只需显示高度和宽度即可。 目前,我有以下代码,但返回的高度和宽度为0(在Mozilla 5中)。 var img = new Image(); img.src = "./filename.jpg"; var imgHeight = img.height; var imgWidth = img.width; alert("image height = " + imgHeight + ", image width = " + imgWidth); 该文件肯定存在,与HTML位于同一目录中,并且其高度和宽度都不为0 :) 我究竟做错了什么? 回答1 如果未加载图像,则不会设置其高度和宽度。 您必须等到图像完全加载后,再检查其尺寸。 也许遵循以下思路: function getWidthAndHeight() { alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size."); return true; } function loadFailure() { alert("'" + this.name + "' failed to load.")
  • 有什么办法可以通过jquery读取图像的“ naturalWidth”?(Is there any way to read out the “naturalWidth” of an image with jquery?)
    问题 我尝试过这样的事情: var Height = $(this).naturalHeight; 但这是行不通的。 有没有办法做到这一点 格莱斯 回答1 $this.css('height', 'auto'); var height = $this.height(); 回答2 在应用jQuery然后剥离jQuery之后,我使用了本地javascript属性 .naturalWidth / .naturalHeight 在我使用的jQuery对象上 var width = this.naturalWidth; var height = this.naturalHeight; 或者 var width = $("selector").get(0).naturalWidth; var height = $("selector").get(0).naturalHeight; 如果未选择jQuery对象。 在jQuery对象上使用get(0)可以访问关联的DOM元素。 在本机DOM元素上,您可以使用本机javascript代码(在此处访问nativ javascript属性.naturalWidth) 回答3 在我看来,已接受的解决方案可以修改对象的外观。 有时jQuery有点太有用了,您必须告诉它摆脱困境。 如果要使用naturalWidth或naturalHeight
  • 为什么即使没有 src 标签,图像“完整”属性也总是返回 true?(Why Image 'complete' property always return true even if there is no src tag?)
    问题 我只是写 document.createElement("img").complete;//To check whether image is loaded or not 在 Firefox 中,它返回 true。 在 IE 中,它返回 false 要么 在 html 页面中,只需创建一个图像: <!-- IMG tag with no SRC attribute. --> <img id="noSrcImg" /> 并在 js 检查完整的属性值: var img = document.getElementById("noSrcImg"); img.complete FF 为真,IE 为假 任何人都可以解释为什么这种不一致的行为? 有没有其他更好的方法来检查图像是否在 DOM 中加载? 我也尝试过使用 readyState 属性,但它不适用于 IE11。 回答1 请尝试加载 还要确保在分配 src 之前定义了事件处理程序 - 在非常快的网络上,如果未先定义,则 src 可能会在事件处理程序之前加载 var im = document.createElement("img"); im.onload=function() { alert(this.src+' loaded')} // assign before src im.onerror=function() { alert
  • 用Javascript加载图像时,iPad / iPhone浏览器崩溃(iPad/iPhone browser crashing when loading images in Javascript)
    问题 我正在尝试在Safari中建立模仿iPad Photo应用程序的图片库。 它运行完美,除了一旦通过将它们添加到DOM或创建新的Image对象加载了超过6MB左右的图像,新图像要么停止加载,要么浏览器崩溃。 这个问题已经很普遍了(其他所有人都达到了相同的极限),我已经排除了将Javascript代码作为罪魁祸首的可能性。 鉴于您可以在一个元素中或通过浏览器中的媒体播放器流式传输多于几MB的内存,此限制似乎是不必要的,并且应该有某种解决方法。 也许通过释放内存或其他方式。 我也遇到了关于UIWebView的参考。 “ JavaScript分配也限制为10 MB。如果您超出JavaScript的总内存分配限制,Safari就会引发异常。” 哪个与我所看到的完全匹配。 是否有可能在Javascript中释放对象,或者Safari / UIWebView是否保持运行状态并永不松手? 或者,是否有其他解决方法可以用另一种方式加载数据,而不会占用这10MB的空间? 回答1 更新:我认为有一种更简单的方法可以执行此操作,具体取决于您的应用程序。 如果您只具有一个<img>元素或Image对象(或者如果需要动画或过渡,则可能只有两个,例如“ this”图像和“ next”图像),而不是具有多个图像,并且只需更新.src .width , .height等等,您永远都不会接近10MB的限制。
  • 防止图像加载(Prevent images from loading)
    问题 有没有办法用javascript / jquery防止图像加载? 我正在从带有图像的html列表构建幻灯片。 因此,我想收集所有src数据,然后阻止加载图像。 因此,稍后当用户真正需要图像时,我便会加载它。 我在Google上找到了一些延迟加载脚本,但是找不到阻止图像加载的方式。 提前致谢。 编辑1: 从答案看来,不可能使用javascript阻止图像加载。 这是一个执行延迟加载的脚本。 有人可以解释它是如何工作的吗? 似乎当javascript关闭时,它只是正常加载图像,而当它打开时,将在您滚动到其位置时加载它们。 回答1 如果您在页面上呈现HTML,则即使HTML被隐藏,也将被加载。 如果您希望仅在需要时才加载图像,则必须在javascript中的image标记上动态设置源(src)。 编辑1:您引用的脚本只是检查以查看您向下滚动页面的距离,然后通过检查其顶部确定哪些图像可见(或几乎可见),请参阅$ .belowthefold和$ .rightoffold扩展名。 当图像的大小都相同时,该示例非常有用,因为它们的容器也可以是相同的大小,并且在延迟加载图像时不会出现任何奇怪的页面大小调整行为。 如果图像的高度和宽度变化,您可能会得到一些奇怪的结果。 编辑2: <script type="text/javascript" charset="utf-8"> $(document
  • 可以使用 Javascript 来检测重定向的图像 SRC(在任何流行的浏览器中)吗?(Can Javascript be used to detect a redirected image SRC (in any popular browser)?)
    问题 我猜没有,但你永远不知道。 浏览器加载<img src="http://example.net/lolcat.png"> example.net 将lolcat.png重定向到http://static.example.net/bandwidth-exceeded.gif 我可以检测到吗? 跨浏览器并不重要,只是寻找一个可以在任何一种流行浏览器中工作的选项。 到目前为止,我最好的选择是知道占位符图像的大小,通过查看图像大小 onload(在支持图像标签中的 onload 事件的浏览器中)获得“可能”,并发出快速 XHR 请求通知后端我们'有一个可能。 回答1 我检查了以下代码: var a=new Image(); a.src='http://example.com/image.png'; alert( a.width ); 在这种情况下返回 0,因为图像不存在。 在链接文本上,我发现了很多值得一试的属性。 如果失败,您可能需要研究 jQuery 和 AJAX。 编辑: 在 firefox firebug 上测试 var a=new Image(); a.src='http://l.yimg.com/g/images/photo_unavailable_m.gif'; console.log(a.width); // the image exists and returns
  • 将图像标签的 src 属性中的变量值设置为 javascript/ajax 中的 base64 编码图像(setting variable value in src attribute of image tag to a base64 encoded image in javascript/ajax)
    问题 我有一个图像字节代码 base64 编码,我试图在 javascript/ajax 中设置标签的 src 属性。 我不想直接设置它,因为我通过从 servlet 读取响应来获取字节码并将字节码放入变量中,并希望在 src 属性中设置此变量值,如下所示。 var src3="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL