使用 javascript 动态插入图像答案

【问题标题】：Insert images dynamically with javascript使用 javascript 动态插入图像
【发布时间】：2016-10-05 13:20:30
【问题描述】：

我正在为 Chrome Cast 开发一个自定义接收器。我的发件人给我发了一张图片到 chromecast，根据发件人发来的坐标精确定位这张图片。

index.html:

<div id="interacao" class="interacao">
    <h1 id="h1texto">Adicione suas mídias pelo celular!</h1>
    <video id="vdo"></video>
</div>

manipulacaoElemento.js:

function insertImg(element){
    elementoAInserir = document.createElement("img");
    elementoAInserir.id = element.idImg;
    elementoAInserir.src = element.url;
    elementoAInserir.style.width = element.widthImagem +'px';
    elementoAInserir.style.height = element.heightImagem +'px';
    elementoAInserir.style.left = element.posicao.x+'px';
    elementoAInserir.style.top = element.posicao.y+'px';
    $('.interacao').html(elementoAInserir);
}

图片被加载了，但不是在发送方发送的位置，而是在 0, 0 的位置。谁能帮我解决这个问题？

【问题讨论】：

标签： javascript chromecast google-cast

【解决方案1】：

你不见了elementoAInserir.style.position = 'absolute';

function insertImg(element) {
  elementoAInserir = document.createElement("img");
  elementoAInserir.id = element.idImg;
  elementoAInserir.src = element.url;
  elementoAInserir.style.position = 'absolute';
  elementoAInserir.style.width = element.widthImagem + 'px';
  elementoAInserir.style.height = element.heightImagem + 'px';
  elementoAInserir.style.left = element.posicao.x + 'px';
  elementoAInserir.style.top = element.posicao.y + 'px';
  $('.interacao').html(elementoAInserir);
}

insertImg({
  idImg: '...',
  url: 'https://www.gravatar.com/avatar',
  widthImagem: 100,
  heightImagem: 100,
  posicao: {
    x: 100,
    y: 100
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="interacao" class="interacao">
  <h1 id="h1texto">Adicione suas mídias pelo celular!</h1>
  <video id="vdo"></video>
</div>

【讨论】：