이미지 가져와서 출력
본문
다른 서버에 있는 이미지의 url을 가져와서 그 이미지를 페이지에 출력하고 싶습니다.
구글링해서 제가 원하는 코드를 가져오긴했는데 저는 이미지를 메인에 있는 img div에 출력하고 싶습니다.
어떻게 고치면 메인의 img div에 출력 할 수 있을까요??
<!DOCTYPE HTML>
<html>
<head>
<title>capstone3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="/static/assets/css/str_main.css" />
</head>
<style>
.imgResult {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between;
align-content: center;
align-items: stretch;
}
</style>
<body class="homepage is-preload">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<div class="container">
<!-- Logo -->
<h1 id="logo"><a href="user_main.html">프로그램 이름</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a class="icon solid fa-home" href="user_main.html"><span>Home</span></a></li>
<li><a class="icon fa-chart-bar" href="/templates/imgUpload.html"><span>이미지 업로드</span></a></li>
<li><a class="icon solid fa-cog" href="/templates/cameraUpload.html"><span>실시간 검사</span></a></li>
<li><a class="icon solid fa-retweet" href="/templates/list.html"><span>내역조회</span></a></li>
<li><a class="icon solid fa-retweet" href="/templates/statistics.html"><span>통계</span></a></li>
<li><a class="icon solid fa-sitemap" href=" "><span>로그아웃</span></a></li>
</ul>
</nav>
</div>
</section>
<!-- Main -->
<section id="main">
<div class="container">
<div class="imgResult">
<div class="img"style="width:750px; height:550px; border:1px solid red; margin: 2px;">
이미지 결과 사진
</div>
<div class="result"style="width:380px; height:350px; border:1px solid green; margin: 2px;">
검사 결과
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script>
var file = "" //다른 서버주소/.jpg
var reader = new FileReader();
reader.readAsDataURL(file); //파일을 읽는 메서드
reader.onload = function(){
var photoFrame = document.createElement("div");
photoFrame.style = 'background : url(${reader.result}); background-size : cover';
photoFrame.className = "photoFrame";
document.getElementById("pictures").appendChild(photoFrame);
e.target.value = "";
}
</script>
</body>
</html>
답변 2
document.getElementById("출력할 DIV 아이디").appendChild(photoFrame);
파일로 읽을 필요가 있을까요?
그냥 URL로 넣으시면 될꺼 같습니다.
photoFrame.style.backgroundImage = `url(${file})`;