问题：

在javascript的类中从数组加载图像到img标签

归翔

2023-03-14

我有两个div框box1，box2，在将box2拖动到box1时，box1被删除，box2元素img被删除。

我有一个10图像值为1的数组图像。jpg至10。jpg。我有一个数组变量，图像值为10，值为1。jpg至10。jpg。

我有一个名为temparray的临时数组，它存储随机选择的值的对应图像

我有一个tempimages.push（${ptags[i]. text Content}. jpg）；，它将correponding图像推送到temparray。

我想放置相同的图像作为选择的随机值，即，如果3和8被选择为box 1

要素3。jpg和8。jpg应置于第2框的img src中。

如何实现？

function rvalue() {
    var array = [];
    var tempimages = [];
    var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

    arrayLength = arrayVariable.length;

    ptags = document.getElementsByName("values");
    for (i = 0; i < ptags.length; i++) {
        ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
        array.push(ptags[i].textContent);
        tempimages.push(`${ptags[i].textContent}.jpg`); // want to display array to box002 to imgtag
    }
    console.log(array);
    console.log(tempimages);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}


function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var el = document.getElementById(data);

    el.parentNode.removeChild; // deleting drag item

    ev.target.style.backgroundColor = 'initial'; //[value indicate which box element] bgcoclor none


    /* Added */
    var pParagraph = ev.target.firstElementChild;
    console.log(pParagraph);
    ev.target.removeChild(pParagraph);
   

    alert(el);
}

.box1 {
    background-color: coral;
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 5px;
    border: 2px solid #333;
    border-color: #e6e600;
    margin: -2px;
    border-radius: 10%;
    background-color: #66ff66;
    }
.box2 {
    float: left;
    width: 30px;
    height: 30px;
    background-color:#ffff00 2px;}
p {
    font: "Courier New",
    Courier,
    monospace;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
}

<body onload="rvalue()">
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
        <p name="values">name</p>
    </div>
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
        <p name="values">name2</p>
    </div>
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
        <p name="values">name3</p>
    </div>

    <div class="box2" draggable="true" ondragstart="drag(event)" id="2">
        <img src="" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
    </div>

</body>

共有1个答案

宗乐池

2023-03-14

这不是一个超级完整的答案，目前没有时间做得更好，但这可能会给你一个开始的地方，解决一些问题，它确实做下降，只是不是超级好。

var myapp = {};

function imgCreate(src, alt, title) {
  var img = document.createElement('img');
  img.src = src;
  img.draggable = "true";
  img.border = "rounded";
  if (alt != null) img.alt = alt;
  if (title != null) img.title = title;
  img.class = "slide";
  return img;
}

function rvalue() {
  var array = [];
  var tempimages = [];
  var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

  arrayLength = arrayVariable.length;

  ptags = document.getElementsByName("values");
  for (i = 0; i < ptags.length; i++) {
    let rv = Math.floor(Math.random() * arrayLength);
    ptags[i].innerHTML = arrayVariable[rv];
    array.push(ptags[i].textContent);
    tempimages.push(ptags[i].textContent.jpg); // want to display array to box002 to imgtag
    ptags[i].appendChild(imgCreate(ArrayOfImages[i], ArrayOfImages[i], ArrayOfImages[i] + " title"));
  }
  // console.log(array);
  // console.log(tempimages);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  // var el = document.getElementById(data);
  // el.parentNode.removeChild; // deleting drag item
  console.log(data);

  ev.target.style.backgroundColor = 'lightblue'; //[value indicate which box element] bgcoclor none

  /* Added */
  // var pParagraph = ev.target.firstElementChild;
  // console.log(pParagraph);
  // ev.target.removeChild(pParagraph);
  // alert(el);
}

window.onload = function() {
  // console.log("loading");
  var ndbox = document.getElementsByClassName("box1");
  var ndval = document.getElementsByName("p");
  for (var i = 0; i < ndbox.length; i++) {
    ndbox[i].addEventListener("dragover", allowDrop, true);
    ndbox[i].addEventListener("drop", drop, true);
  }
  for (var i = 0; i < ndval.length; i++) {
    ndval[i].addEventListener("dragover", allowDrop);
    ndval[i].addEventListener("drop", allowDrop);
  }
}

.box1 {
  background-color: coral;
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #66ff66;
}

.slide {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.box2 {
  float: left;
  width: 100px;
  height: 100px;
  float: left;
  clear: both;
  background-color: #ffff00;
  margin-top: 2px;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
}

html prettyprint-override"><body onload="rvalue()">
  <div class="box1" id="10">
    <p name="values">name</p>
  </div>
  <div class="box1" id="11">
    <p name="values">name2</p>
  </div>
  <div class="box1" id="12">
    <p name="values">name3</p>
  </div>

  <div class="box2" draggable="true" ondragstart="drag(event)" id="2">
    <img src="1.jpg" alt="1.jpg" draggable="true" class="slide" border="rounded" />
  </div>

</body>

类似资料：

如何将图像从url数组加载到图像数组？

我有一个url数组，我必须加载所有图像并将其放入图像数组。我在试这个但它不起作用。我该怎么做？
等待图像加载到JavaScript中

问题内容：我正在进行Ajax调用，该调用返回了一些信息，包括图像路径。我在HTML中准备了所有这些信息，这些信息将作为一种弹出窗口显示。我只是将pop div的可见性从隐藏切换为可见。要设置弹出div的位置，我必须根据图像的高度进行计算。因此，在设置位置并将可见性切换为可见之前，我必须等待图像加载知道其尺寸。我尝试了递归，setTimeout，完整的img属性，while循环等技巧，但没有
无法将图像图标加载到 Netbeans 中的按钮

这是我写的加载图像图标的代码。你能建议我需要做什么吗，因为我得到一个错误: java.lang.RuntimeException：无法编译的源代码-错误的sym类型：ImageDisplayTest.class.getClassLoader
如果v-img加载错误，如何显示“未找到图像”图像

查看此代码笔，了解简单的vuetify设置。 https://codepen.io/khoulaiz/pen/gObJPxO?editors=1010 中间图像将无法加载。我有一个错误处理程序，其中我想用一个工作映像替换失败映像的src属性，并在其中强制重新加载映像。我能够替换失败映像的src，但我在强制重新加载v-img的所有尝试中都失败了。到底为什么我没有得到一个失败加载的v-img的参考
在IMG标签中设置从Cordova相机插件中检索的图像

我正在尝试使用Apache Cordova摄像机API来显示从摄像机检索到的图像。我接到了摄像头的电话，可以点击图片。我得到的文件url为 file:///mnt/.....something.jpg 现在，我无法使用jQuery在现有图像标记中设置此图像。我使用的代码是：其中 imageData 是相机成功回调的返回值。 Cordova图像功能的选项，我正在使用目标类型 = 0;源类型 =
使用android将图像加载到地图标记中

我正在尝试添加位图到谷歌地图标记图标。下面是我将图像添加到标记图标的代码。由于位图大小，应用程序正在崩溃错误：java。lang.IllegalArgumentException：尺寸为4096x8192的纹理大于支持的最大尺寸4096x4096

在javascript的类中从数组加载图像到img标签

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档