이미지 가져와서 출력

이미지 가져와서 출력

QA

이미지 가져와서 출력

답변 2

본문

다른 서버에 있는 이미지의 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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 24
© SIRSOFT
현재 페이지 제일 처음으로