일반 HTML에서 특정게시물의 이미지 다 불러오기.

일반 HTML에서 특정게시물의 이미지 다 불러오기.

QA

일반 HTML에서 특정게시물의 이미지 다 불러오기.

본문

일반 HTML 페이지에서

특정 게시판의 게시물에 첨부된 이미지를

순서대로 불러오고 싶어요.

 

<?php
include_once('./_common.php');
$file = get_file('test', '1');
?>                                     

 

<div class="pic" data-clr="white"><img data-src="<?php echo $file[0]['path'] ?>/<?php echo $file[0]['file'] ?>" alt="" width="800" height="1000"/></div>

 

이렇게 하니 불러오기는 하는데,

이미지 갯수 만큼 추가 해줘야하는 번거로움이 있더라고요..

 

그래서

 

A 게시판의 1번 게시물에 4개의 이미지가 첨부되면

자동으로 4개를 출력하고,

10개의 이미지가 첨부되어 있으면 10개가 나오게 

조금 편리하게 작업할 방법이 있을까요?

 

 

 

 

이 질문에 댓글 쓰기 :

답변 2


 
<?php for ($i=0; $i<=count($file['file']); $i++) {
  if ($file['file'][$i]['path']) {?>
    <div class="pic" data-clr="white"><img data-src="<?php echo $file[0]['path'] ?>/<?php echo $file[0]['file'] ?>" alt="" width="800" height="1000"/></div>
  <?php }
}?>

1. INPUT TAG를 4개로 변경

 먼저 HTML 코드에서 v-for를 이용해서 4개의 INPUT 태그를 만들어줍니다. 그리고 ref에도 num을 붙여서 중복되지 않도록 체크해줍니다.

 

2. clickInputTag 메소드 변경(INPUT 태그 클릭했을 때)

 INPUT 태그를 클릭했을 때 어떤 태그를 클릭했는지 알 수 있도록 num인자를 추가해줍니다(다른 메소드도 동일해요). 아, 그리고 ref의 숫자가 늘어나면서 this.$refs['images${num}']의 값이 배열이니까 [0]을 붙여주어야 제대로 작동합니다.

 

3. dropInputTag 메소드 변경(INPUT 태그에 이미지를 drop 했을 때)

 이미지를 drop했을 경우 uploadImage 메소드의 인자로 들어가는 file 변수의 경우, 1개일 때 Array.from 끝에 [0]을 붙일 때와 다르게 이것만 지워주면 배열의 형태로 전달이 됩니다. 심플하죠?

 

4. uploadImage 메소드 변경(반복문을 통해 여러 번 동작하도록 함)

 이제 여기에서 Array.from 안에 files뒤에 [0]을 지워주면 images 변수에 배열의 형태로 저장이 됩니다. 그럼 for문을 이용해서 반복적으로 이미지를 S3에 저장하고 URL을 받아오면 됩니다.

 이때 저희는 이미지를 업로드할 수 있는 INPUT 태그를 4개를 만들었고, num의 인자가 1부터 4까지 반복되도록 만들었으니, 이미지를 여러 개 업로드하더라도 5가 초과되는 이미지의 경우 upload 되지 않도록 if문을 작성해줍니다

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT