javascript - JQuery附加图像未显示

Question

对于这个代码块

$(document).ready(() => {
    for (let i = 0; i < 10; i++) {
      $("#main").append(factory());
    }
  });

这将显示图像：

function factory() {
    return $('<image class="champ-icon rounded-circle" src="resources/irelia.jpg" />');
}

虽然这不是

function factory() {
    let $champIcon = $(document.createElement("image"))
      .addClass("champ-icon rounded-circle")
      .attr("src", "resources/irelia.jpg");
    return $champIcon;
}

我也在使用 Bootstrap 4。

该页面目前只是一个静态模型。我想从本地服务器提供给它的数据中动态构建元素。

我实际上只是在周末搞砸了 HTML/CSS 和 jQuery，所以我不确定这里出了什么问题。两个函数不应该返回相同的 jQuery 对象吗？

谢谢！

CSS 类

.champ-icon {
        width: 100px;
        height: 100px;
      }

编辑：用普通的 javascript 创建它也可以。

function factory() {
        let img = new Image();
        img.src = "resources/irelia.jpg";
        img.className = "champ-icon rounded-circle";
        return img;

标签： javascripthtmljquerycss

Answer 1

那是因为您正在尝试以编程方式<image>在 html 中创建元素，但...不存在。要在页面上插入元素，您应该使用<img src="">，而不是<image...>. 更改此行

let $champIcon = $(document.createElement("image"))

至

let $champIcon = $(document.createElement("img"))

它应该工作。