使用 javascript 动态插入图像

Question

我正在为 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。谁能帮我解决这个问题？

Answer 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>

使用 javascript 动态插入图像

Insert images dynamically with javascript

javascript

google-cast

chromecast