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

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

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

$（'
警报发出正常，但图像没有显示，当我检查元素时，它已添加，没有结束斜杠

<img src='image.png' >



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

更新：
感谢所有指出问题不在于斜杠的人（每天都是上学日），那么会是什么呢？下面是一个活生生的例子

更新2：
好吧，看来我是个傻瓜，因为我没有用其他图像测试这个，因为问题似乎出在我使用的测试图像（）上。奇怪的是，当你点击URL时它会加载…但是无论如何，感谢你所有的帮助，我学到了一些东西！
试试这个：

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

$（“当您检查元素时，您看不到它的添加方式。无论您是以HTML代码或元素的形式添加元素（如本例中所示），当您检查代码时，您看到的是从元素创建的代码，而不是用于添加元素的代码

当您使用
$（“”）
时，它实际上执行一个
document.createElement（'img'）
，因此没有可以或不能显示结尾斜杠的HTML代码。元素是作为DOM对象创建的，而不是从HTML代码创建的

因此，图像没有出现的原因不是标记中似乎没有结束斜杠

可能的原因是，在浏览器查找图像时，图像实际上不存在，即文件丢失或URL不正确。
根据提供的信息，我们知道以下情况：


图像已成功附加

映像已成功加载（否则您将无法获得
警报（）


要么你有一个完全透明的图像（当然不太可能），要么我打赌你的CSS某种程度上阻止了它的显示

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

（无可见图像）

具体而言，罪魁祸首似乎是：

display: -webkit-box;

当我禁用该选项时，将显示图像

（图像可见。）
是否指定了正确的路径？此外，您没有将
image.png
括在引号中。根据文档类型，可能不需要斜杠。此外，无论您使用何种工具检查文档，这并不意味着它完全按照写入的方式显示DOM。图像是否存在？您必须以字符串形式传递值：
.attr（'src'，'image.png'）
也许你必须在它前面加一个斜杠：
.attr（'src'，'/image.png'））
。检查路径。我猜
article
要么是
id
要么是
class
。不是吗？？？@Avinash:或者是HTML5
article
元素。@Avinash article是HTML5 article元素，如果有的话，那么它应该是
appendTo
。谢谢，但我恐怕它似乎没有给article添加任何东西啊，appendTo行为方式与我的示例相同，但由于正斜杠被删除，图像不会显示。@克里斯·阿姆斯特朗：您应该阅读注释。这不是因为斜杠。问题出在别处。@克里斯·阿姆斯特朗，费利克斯·金是对的缺少的斜杠是基于您的doctype:HTML4和HTML5不使用结束标记，XHTML doesT加载事件正在启动，因此图像必须已成功加载。好的，我相信你，这不是斜杠：D，那会是什么？下面是一个实例@Chris Armstrong：当我在Firefox、IE、Opera和Safari中测试时，图像显示得很好。@Chris Armstrong：我可以完美地看到图像（在Chrome中）。但它只有在我单击警报中的“确定”后才会显示。哈，谢谢，虽然看起来不太可能，但我使用的测试图像（）似乎是问题所在…当我尝试使用数组中的其他图像时，它们看起来很好。尽管很奇怪，因为图像会在您转到其url时加载