APL 이미지 표시

이 기사의 목표

이미지 URL을 발행하는 방법을 알아보십시오

제작 도구를 사용하여 이미지 레이아웃을 만들 수 있습니다

전제

APL 환경 구축 & 텍스트 표시

APL 제작 도구 문서
APL v1.6

할 일

이미지 구성 요소 을 사용하여 이미지 표시

※하지 않는 것

이미지 표시의 샘플이 있지만, 이 샘플에서 사용되고 있는 컴퍼넌트는 type이 AlexaBackground , AlexaImage .
이러한 컴포넌트가 문서에 보이지 않기 때문에 본 기사에서는 언급하지 않는다.

제작 도구로 이미지 레이아웃을 만듭니다.

제작 도구 에서 프로젝트를 엽니다. (기존이 없으면 하늘에서 만든다)

이미지를 추가합니다. 그러면 테두리만 할 수 있다.

제작 도구로 이미지를 표시하려면 이미지 URL이 필요합니다. 즉, 이미지를 웹에 업로드할 필요가 있다.

이번에는 다음 이미지를 사용합니다.

손쉽게 URL을 발행한다면 마우스 오른쪽 버튼을 클릭하고 "이미지 주소 복사"하면 OK

그 복사한 URL을 Image 컴퍼넌트의 source에 걸면 이미지가 표시된다

그 외에는 imgur 등에 업로드하여 이미지의 주소를 복사해도 OK

S3에 이미지 업로드

APL 트레이닝 시리즈 제1회: 최초의 Alexa Presentation Language (APL)

공식 튜토리얼에서는 S3에 이미지를 업로드하는 방법이 소개되고 있다.

코드 편집기에서 S3 Storage를 엽니다.

그리고는 업로드할 뿐. 다만, 이 화상은 액세스 제한 걸려 있기 때문에 저작 툴에서는 사용할 수 없는 것 같다.
이 이미지의 URL을 취득하는 방법은 튜토리얼을 참조.

레이아웃

문자와 이미지를 배치하는 레이아웃을 만듭니다.

우선, 복수의 컴퍼넌트를 렌더링하기 위한 Container 라고 하는 컴퍼넌트를 사용한다.

Container

왼쪽 상단에 배치

Container의 자식 요소를 중간에 표시

Container 설정을 다음으로 설정

alignItems > center
justifyContent > center

이미지 크기

height and width

구성 요소 높이와 같은 속성은 가능한 한 상대 차원에서 지정해야 합니다. 상대 차원에서 크기를 지정한 구성 요소는 다른 화면의 크기에 따라 조정할 수 있습니다.

차원

상대 차원은 "X%"형식의 문자열로 지정됩니다. X는 유효한 JSON 숫자입니다.

그러나 이미지의 크기는 비율보다 값이 더 쉽기 때문에 이번에는 px로 입력합니다.
width > 300px
height > 150px