css 如何在一个函数中追加同一图像的两个副本？

hvvq6cgz 于 2023-04-13 发布在其他

关注(0)|答案(3)|浏览(86)

这是一个js代码片段，它一直给我带来问题。我试图用不同的动态生成的HTML标签附加2个img层，但浏览器拒绝正确呈现代码。所需的结果是

dropzone.append(img);
dropzone.append(imgIn);

附加2图像与不同的2索引，并在马赛克中这样做了数百次这里是一个链接到Android应用程序此代码是为https://www.webintoapp.com/store/107768

function hueChange() {
  for(let image = 0; image < mosaicCount; image++) {
    let screenWidth = window.innerWidth;
    reader.addEventListener('loadend', () => {
      let img = document.createElement('img');
      let imgIn = document.createElement('imgIn');
      img.setAttribute("id", image)
      img.setAttribute("width", screenWidth/16 + "px")
      imgIn.setAttribute("id", "imgIn" + image)
      imgIn.setAttribute("width", screenWidth/16 + "px")
      img.src = reader.result;
      imgIn.src = reader.result;

      dropzone.append(img);   //this doesn't append
      dropzone.append(imgIn); //this appends

css

来源：https://stackoverflow.com/questions/75980033/how-can-i-append-two-copies-of-the-same-image-in-one-function

3条答案

按热度按时间

t1rydlwq1#

你可以只创建一个元素，并在追加时克隆它，然后更新原始元素并追加它。

const img = document.createElement('img');
const dropzone = document.querySelector('#dropzone');
const imageId = 'imageId_';

img.setAttribute("id", imageId + '1');
img.setAttribute("width", '100px'); // screenWidth / 16 + "px");
img.src = 'https://via.placeholder.com/100'; // reader.result;
dropzone.append(img.cloneNode());

img.setAttribute("id", imageId + '2');
img.setAttribute("width", '100px'); // screenWidth / 16 + "px");
img.src = 'https://via.placeholder.com/100/ff0000'; // reader.result;
dropzone.append(img);

<div id="dropzone"></div>

赞(0）回复(0）举报 2023-04-13

70gysomp2#

不存在imgIn元素，因此该元素不会呈现。您应该为两个元素使用img。
您应该将循环放在事件侦听器中，而不是添加多个侦听器，它们都执行相同的操作。

function hueChange() {
  reader.addEventListener('loadend', () => {
    let imgWidth = window.innerWidth / 16 + "px";

    for (let image = 0; image < mosaicCount; image++) {
      let img = document.createElement('img');
      let imgIn = document.createElement('img');
      img.setAttribute("id", image)
      img.setAttribute("width", imgWidth)
      imgIn.setAttribute("id", "imgIn" + image)
      imgIn.setAttribute("width", imgWidth)
      img.src = reader.result;
      imgIn.src = reader.result;

      dropzone.append(img);
      dropzone.append(imgIn);
    }
  });
}

赞(0）回复(0）举报 2023-04-13

nnsrf1az3#

第一个问题是你正在创建一个“自定义”元素，因为你正在创建一个带有“imgIn”的元素，所以它不会渲染和图像。
您可以使用cloneNode并更改id，这样就不必复制id。

const dropzone = document.querySelector('#dropZone');

const screenWidth = window.innerWidth;
const image = 1;

const img = document.createElement('img');
img.setAttribute("id", 'img' + image)
img.setAttribute("width", screenWidth / 16 + "px")
img.src = 'http://placekitten.com/200/300'; // reader.result;
dropzone.append(img);

const imgIn = img.cloneNode(true);
imgIn.setAttribute("id", 'imgIn' + image)
dropzone.append(imgIn);

<div id="dropZone"></div>

赞(0）回复(0）举报 2023-04-13

我来回答

css 如何在一个函数中追加同一图像的两个副本？

3条答案

相关问题

热门标签

最新问答