일반 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문을 작성해줍니다