코드이그나이터4 뷰 다루기 - 11 - 이미지

이미지

HTML에서 이미지를 표기하는 방법을 알아보겠습니다.
우리가 만들 페이지는 아래와 같습니다.

이번 챕터의 코드는 https://github.com/koeunyeon/ci4/tree/view-image 에 있습니다.

웹서버의 이미지를 표기하는 방법을 알아보기 위해 예제 이미지를 다운로드하겠습니다.
https://www.php.net/images/logos/php-logo.svg 이미지를 다른 이름으로 저장한 다음 public/images/php-logo.svg 경로에 복사합니다.
public 디렉토리는 이미 있지만 images 디렉토리는 없으므로 디렉토리 생성 후 탐색기 등을 통해 복사하면 됩니다.

만일 리눅스나 맥에서 하신다면 아래처럼 커맨드 라인을 통해 바로 파일을 다운로드할 수 있습니다.

cd public
mkdir images
curl https://www.php.net/images/logos/php-logo.svg > php-logo.svg

View 컨트롤러에 아래의 메소드를 추가합니다.
app/Controllers/View.php

public function image(): string
{
    $data = [
        ['src' => 'http://codeigniter.com/assets/images/ci-logo-big.png', 'alt' => 'codeigniter4', 'width' => '200px', 'height' => '200px'], // (1)
        ['src' => base_url('/images/php-logo.svg'), 'alt' => 'PHP', 'width' => '300px', 'height' => '100px'], // (2)
    ];

    return View("/view/image", ['data' => $data]);
}

(1) 뷰에 전달할 데이터를 설정합니다.

['src' => 'http://..생략', 'alt' => 'codeigniter4', 'width' => '200px', 'height' => '200px']

src 항목은 이미지의 주소입니다. (1)에서는 "http로 시작하는 절대 경로"를 예시로 지정했습니다.
이미지 태그는 예시에서 볼 수 있듯이 다른 도메인의 이미지도 불러올 수 있습니다.
alt는 이미지의 대체 메세지입니다. 이미지를 설명할 때 쓰입니다.
width 는 이미지의 가로 크기입니다.
height는 이미지의 세로 크기입니다.

(2) src항목을 보면 base_url 헬퍼 함수가 있는 것을 볼 수 있습니다.

base_url('/images/php-logo.svg')

base_url 헬퍼 함수는 .env 파일이나 app/Config/App.php 파일의 baseURL 값을 읽어 리턴하는 함수입니다. 우리는 .env 파일에 app.baseURL = 'http://localhost:8080' 항목을 설정했으므로 base_url(추가경로) 함수는 http://localhost:8080/추가경로를 리턴하게 됩니다.
우리가 다운받아 public/images/ 디렉토리에 넣어둔 php-logo.svg 파일을 웹 서버에서 접근하려면 http://localhost:8080/images/php-logo.svg 로 접근합니다. 즉, public 디렉토리는 코드이그나이터4 소스 구조에서는 존재하지만 웹서버에서는 public 없이 접근합니다. 따라서 base_url 함수의 파라미터는 public/images/php-logo.svg가 아니라 /images/php-logo.svg 입니다.

뷰를 추가하겠습니다.
app/Views/view/image.php

<?php foreach ($data as $row) : ?>
    <div>
        <!-- (1) -->
        <img src="<?= $row['src'] ?>" alt="<?= $row['alt'] ?>" width="<?= $row['width'] ?>"  height="<?= $row['height'] ?>" />
    </div>
<?php endforeach; ?>

코드를 확인해 보겠습니다.
(1) 뷰에 전달할 데이터를 설정합니다.

src 항목은 이미지의 주소입니다. 이미지 태그는 다른 도메인의 이미지도 불러올 수 있습니다.
alt는 이미지를 설명할 때 사용되는 대체 메세지입니다. 웹 표준에서는 alt태그를 사용하도록 규정하고 있는데, 이는 시각장애인 분들이 웹 페이지를 읽을 때 alt 태그를 보고 브라우저가 읽어주기도 하고, 검색 엔진에서도 alt 태그를 기준으로 이미지 검색을 하기 때문입니다.
width 는 이미지의 가로 크기입니다. 최근에는 CSS로 이미지 크기를 설정하는 경우가 많으므로 실제 쓰임새는 많지 않으나 엄연히 image태그의 일부 속성이기 때문에 함께 넣었습니다.

height는 이미지의 세로 크기입니다.

브라우저에서 http://localhost:8080/view/image에 접속해 결과를 확인합니다.