英文:
Get SRC of Javascript image
问题
Here's the translated content you requested without code translation:
I am creating an image gallery in javascript and I wrote some functions for it. When I click the "add" button, a window opens to select a file, and an "" tag is created in my relevant container. But how do I automatically put the src of the SELECTED image in my img tag?
My codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Gallery</title>
</head>
<body>
<div class="container">
<h1>Gallery</h1>
<button id="addButton">Add</button>
<div id="containerImage" class="container-image"></div>
</div>
<script src="app.js"></script>
</body>
</html>
let addButton = document.querySelector("#addButton");
let imageContainer = document.querySelector("#containerImage");
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.click();
});
addButton.addEventListener('click', function () {
let image = document.createElement('img');
imageContainer.appendChild(image);
image.className = "resim";
});
I'm new to javascript and I'm trying to do small projects.
I tried:
image.src = URL.createObjectURL(image)
Please note that your code snippet image.src = URL.createObjectURL(image) seems to have a problem. You should use the selected file to create a URL instead of image. You might want to use the input element to get the selected file and then create a URL for it.
英文:
I am creating an image gallery in javascript and I wrote some functions for it. When I click the "add" button, a window opens to select a file and a "<img>" tag is created in my relevant container, but how do I automatically put the src of the SELECTED image in my img tag?
my codes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Gallery</title>
</head>
<body>
<div class="container">
<h1>Gallery</h1>
<button id="addButton">Add</button>
<div id="containerImage" class="container-image"></div>
</div>
<script src="app.js"></script>
</body>
</html>
let addButton = document.querySelector("#addButton");
let imageContainer = document.querySelector("#containerImage");
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.click();
});
addButton.addEventListener('click',function(){
let image = document.createElement('img');
imageContainer.appendChild(image);
image.className="resim";
});
Im new to javascript and I'm trying to do small small projects
i tried ;
image.src = URL.createObjectURL(image)
答案1
得分: 1
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.addEventListener('change', function () {
let image = document.createElement('img');
image.className = "resim";
image.src = URL.createObjectURL(input.files[0]);
imageContainer.appendChild(image);
});
input.click();
});
英文:
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.addEventListener('change', function () {
let image = document.createElement('img');
image.className = "resim";
image.src = URL.createObjectURL(input.files[0]);
imageContainer.appendChild(image);
});
input.click();
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论