顯示來自給定 url 的圖像
[英]Display image from a given url
問題描述
我有一個包含 3 個單元格的數組。在第一個單元格中，我有一個文本區域，您可以在其中插入圖像的 url。在第二個單元格中，我有一個按鈕，當您單擊圖像時，該按鈕將顯示在我有 div 的第三個單元格中顯示圖像。問題是我如何從互聯網或本地顯示圖像？ 我寫的代碼是：
function loadImage(){
var mydiv = document.getElementById("idofdivtodisplayimg");
var url = document.getElementById("idoftextareawhereyouputtheurl");
mydiv.innerHTML = url.value;
}
5 個解決方案
解決方案1
0 2018-05-29 15:15:33
<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
0 2018-05-29 15:22:26
您可以看到示例代碼將圖像從數組添加到文檔中。 您還可以使用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); });解決方案3
0 2018-05-29 15:25:14
這兩者兼而有之，它讓您上傳圖像（或至少將其加載到瀏覽器）或提供圖像源的 URL。 單擊按鈕，圖像被加載並顯示！
此片段使用 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>
解決方案4
0 2018-05-29 15:26:23
為了做到這兩點，您需要更改您的 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] );
});
解決方案5
0 2018-05-29 15:27:43
我通過用 img 標簽替換第三個單元格中的 div 部分解決了它，並且在我上面寫的函數中，我將它改為：
var image = document.getElementbyId("imageid");
var url = document.getElementbyId("urlid");
image.src = url.value;
但是在我的桌子上，我還有一個按鈕，您可以在其中添加與上面相同的行。如何為放置在每個文本框的每個 url 執行此功能？
如何顯示圖像並從JSON數據中給出的URL播放音頻？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.