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动态插入图像

1 个答案: