html 显示来自给定url的图像

2cmtqfgy 于 2023-03-11 发布在其他

关注(0)|答案(5)|浏览(141)

我有一个3个单元格的数组。在第一个单元格我有一个textarea，你可以在那里插入一个图像的网址。在第二个单元格我有一个按钮，当你点击图像显示在第三个单元格，我有一个div来显示图像。问题是我如何显示图像无论是从互联网或从本地？我写的代码是：

function loadImage(){
  var mydiv = document.getElementById("idofdivtodisplayimg");
  var url = document.getElementById("idoftextareawhereyouputtheurl");
  mydiv.innerHTML = url.value;
}

Html

来源：https://stackoverflow.com/questions/50587662/display-image-from-a-given-url

5条答案

按热度按时间

qvk1mo1f1#

<html>
<body>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            img = document.createElement('img');
            img.src = document.getElementById('imagename').value;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

赞(0）回复(0）举报 2023-03-11

mmvthczy2#

您可以看到示例代码会将数组中的图像添加到文档中。您还可以使用url.appendChild将图像附加到函数中的任何元素

var arr = ['http://via.placeholder.com/350x150', 'http://via.placeholder.com/350x250','http://via.placeholder.com/350x350']; // hold image urls in an array.

  arr.forEach(function(item){
      // loop through array and add images to the document.
      var img = new Image();
      img.src = item;
      document.body.appendChild(img);
  });

赞(0）回复(0）举报 2023-03-11

f5emj3cl3#

为了做到这两点，你需要改变你的html和代码。
对于用户有url的情况，你可以创建一个新的图像，并将其附加到div中，将图像的src设置为输入中设置的url：

function loadImage(){
  var mydiv = document.getElementById("idofdivtodisplayimg");
  var url = document.getElementById("idoftextareawhereyouputtheurl");
  var image = new Image;
  mydiv.appendChild(image);
  image.src = url.value;
}

现在，要让它显示本Map像，您将需要一个文件输入或拖放方案，因为没有某种类型的用户交互，您无法访问本地文件。
因此，例如，您需要更改html以包含一个文件输入，并获取对用户选择的选定文件的引用，然后使用FileReader读取该文件，最后显示它
超文本标记语言

<input type="file" id="imagefile">

JS系统

//input reference
var imageinput = document.getElementById("imagefile");
imageinput.addEventListener('change',function (){
  var mydiv = document.getElementById("idofdivtodisplayimg");

  var image = new Image;
  mydiv.appendChild(image);

  //FileReader instance
  var reader = new FileReader;
  reader.addEventListener('load',function(){
     //reader.result will contain a dataURL that can be used
     //like a regular image url
     image.src = reader.result;
  });
  //read the file as a dataURL
  reader.readAsDataURL( imageinput.files[0] );
});

赞(0）回复(0）举报 2023-03-11

flvlnr444#

这两者都可以，它让你上传一张图片（或者至少把它加载到浏览器）或者给予一个图片源的URL。点击按钮，图片就被加载和显示了！
此代码段使用API获取上传的图像并在图像元素中显示它

function uploadOrNot() {
  if (document.querySelector("input[type=file]").files[0]){
    let input = document.querySelector("input[type=file]");
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        display(e.target.result);
      }

      reader.readAsDataURL(input.files[0]);
    }
  } else if (document.querySelector("input[type=text]").value){
     display(document.querySelector("input[type=text]").value);
  }
}

function display(res) {
	let img = document.createElement("IMG");
	img.src=res;
	document.querySelector("#result").appendChild(img);
}

<div id="urlOrUpload">
  <input type="text"/>
  <br> 
  <input type="file" accetp="image/*"/>
</div>
<div id="buttonHolder">
  <button type="button" onclick="uploadOrNot()">Display</button>
</div>
<div id="result"></div>

赞(0）回复(0）举报 2023-03-11

jgwigjjp5#

我用img标签替换了第三个单元格中的div，部分地解决了这个问题，在我上面写的函数中，我将其修改为：

var image = document.getElementbyId("imageid");
var url = document.getElementbyId("urlid");
image.src = url.value;

但是在我的表中，我也有一个按钮，你可以在那里添加一个相同的行，如上所述。我怎么才能做到这一点，每个网址是放在每个文本框功能？

赞(0）回复(0）举报 2023-03-11

我来回答

html 显示来自给定url的图像

5条答案

相关问题

热门标签

最新问答