如何使用 Javascript/jQuery 创建和附加图像？

Question

我正在使用以下代码创建一个图像元素，加载它，然后在加载时将其附加到文章中。

$('<img />')
  .attr('src', 'image.png') //actually imageData[0].url
  .load(function () {
    $('article').append($(this));
    alert('image added');
  });

警报触发正常，但图像没有出现，当我检查元素时，它已被添加而没有结束斜线

<img src='image.png' >

为什么浏览器会删除正斜杠，我该如何停止？

更新： 感谢所有指出问题不是斜线的人（每天都是上学日），那会是什么呢？这是http://chris-armstrong.com/inspiration/?username=behoff的实时示例@

更新 2： 好的，所以看起来我是个白痴，因为我没有用其他图像进行测试，因为问题似乎出在我使用的测试图像 (http://img.ffffound.com/static-data/assets/6/dc01f803819405bfe160459021cfe6cc57766f9b_m.jpg) 上。奇怪，因为它会在您单击 URL 时加载...但无论如何，感谢您的所有帮助，我学到了一些东西！

Answer 1

根据提供的信息，我们知道以下内容：

• 图片附加成功。

• 图片已成功加载（否则你不会得到alert()）。

要么你有一个完全透明的图像（当然不可能），要么我敢打赌你的 C​​SS 以某种方式阻止了它的显示。

这是一个使用您在演示中注释掉的 CSS 的示例。

http://jsfiddle.net/JxhaR/ （没有可见图像）

具体来说，罪魁祸首似乎是：

display: -webkit-box;

当我禁用它时，图像会显示。

http://jsfiddle.net/JxhaR/1/ （图片可见。）

Answer 2

试试这个：

$('<img />')
    .attr('src', 'image.png')
    .append('article')
    .load(function(){
        alert('image added');
    });

Answer 3

当您检查元素时，您看不到它添加的方式。无论您将元素添加为 HTML 代码还是元素（如本例所示），当您检查代码时，您正在查看的是从元素创建的代码，而不是用于添加元素的代码。

当您使用$('<img />') 时，它实际上是一个document.createElement('img')，因此没有HTML 代码可以或不可以出现结尾斜线。该元素是作为 DOM 对象创建的，它不是从 HTML 代码创建的。

所以，图片没有出现的原因并不是标签中似乎没有结束斜线。

可能的原因是图像实际上不存在于浏览器正在查找的位置，即文件丢失或 URL 不正确。