显示来自给定 url 的图像答案

【问题标题】：Display image from a given url显示来自给定 url 的图像
【发布时间】：2018-11-08 07:18:04
【问题描述】：

我有一个包含 3 个单元格的数组。在第一个单元格中，我有一个文本区域，您可以在其中插入图像的 url。在第二个单元格中，我有一个按钮，当您单击图像时，我会在第三个单元格中显示有一个 div 来显示图像。问题是我如何从互联网或本地显示图像？我写的代码是：

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

【问题讨论】：

“来自本地”是什么意思？上传文件？
基本上显示一个图像女巫在你的本地电脑上
好的，您尝试了哪些方法来完成这项工作？
我写了上面试过的函数
不能只使用文本区域/文本输入，因为您不能仅通过用户提供路径来访问本地系统上的文件。您需要实现文件输入元素或拖放方案才能使您的那部分想法起作用

标签： javascript html image insert

【解决方案1】：

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

【讨论】：

【解决方案2】：

为了做到这两点，您需要更改您的 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;
}

现在要让它显示本地图像，您将需要文件输入或拖放方案，因为如果没有某种类型的用户交互，您将无法访问本地文件。

因此，例如，您需要更改 html 以包含文件输入，并获取对用户选择的选定文件的引用。然后用FileReader读取文件，最后显示出来

HTML

<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] );
});

【讨论】：

为什么不直接使用URL.createObjectURL？

【解决方案3】：

这两者兼而有之，它可以让您上传图像（或至少将其加载到浏览器）或提供图像源的 URL。点击按钮，图片加载显示！

这个sn-p使用FileReader 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>

【讨论】：

这个问题回答得最好！
为什么不直接使用URL.createObjectURL？

【解决方案4】：

我通过用 img 标签替换第三个单元格的 div 部分解决了这个问题，在我上面写的函数中，我把它改成：

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

但是在我的桌子上，我还有一个按钮，您可以在其中添加与上面相同的行。如何为放置在每个文本框的每个 url 执行此功能？

【讨论】：

【解决方案5】：

您可以看到示例代码将图像从数组添加到文档。您还可以使用 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);
  });

【讨论】：

它没有回答问题
OP 询问：“问题是我如何从互联网或本地显示图像”我提供了一种通过arr 变量实现此目的的方法。任何 URL 都可以进入数组。