웹 애플리케이션에서 이미지를 사용하는 방법

이 튜토리얼은 웹 애플리케이션에서 Image 컴포넌트 사용법을 설명합니다.

Look & Feel

• Upload - 버튼을 누르고 파일 시스템에서 이미지를 선택하여 이미지를 미리 정의할 수 있습니다.

• Image alt [ string ] - 대체 태그 및 대체 설명이라고도 하는 대체 텍스트는 이미지가 사용자 화면에 로드되지 않는 경우 웹페이지의 이미지 대신 표시되는 서면 사본입니다. 이 텍스트는 화면 읽기 도구가 시각 장애가 있는 독자에게 이미지를 설명하고 검색 엔진이 웹사이트를 더 잘 크롤링하고 순위를 매길 수 있도록 도와줍니다.
• Width [ string ] - 기본적으로 이미지 너비입니다.
• Height [ string ] - 기본적으로 이미지 높이입니다.
• Visible [ boolean ] - 이미지가 보이는지 여부를 정의합니다.
• Name [ string ] - 구성 요소의 이름.

관련 비즈니스 프로세스

HTML의 이미지는 이미지 개체 자체에 대한 참조입니다. 따라서 이미지는 항상 링크와 함께 작동하며 이미지 데이터를 사용하려면 이미지에 대한 링크를 가져와야 합니다.

웹 애플리케이션 사용을 위해 다음 BPs 가 미리 생성됩니다.

• Image Get Properties 가져오기 - 이미지 속성 가져오기:
  • Component ID [ string ] - 구성 요소의 식별자.
  • Width [ string ] - 이미지 너비;
  • Height [ string ] - 이미지 높이;
  • Image URL [ string ] - 이미지 URL-주소;
  • Tooltip [ string ] - 마우스 오버 시 표시될 툴팁 문자열.
  • Visible [ boolean ] - 이미지가 보이는지 여부를 정의합니다.
  • Loading [ boolean ] - true 인 경우 이미지를 " loading " 상태로 설정합니다.

• Image Set Properties - 선택한 이미지의 모든 속성을 재설정하고 대신 지정된 속성을 설정합니다.
  • Component ID [ string ] - 구성 요소의 식별자.
  • Width [ string ] - 이미지 너비;
  • Height [ string ] - 이미지 높이;
  • Image URL [ string ] - 이미지 URL-주소;
  • Tooltip [ string ] - 마우스 오버 시 표시될 툴팁 문자열.
  • Visible [ boolean ] - 이미지가 보이는지 여부를 정의합니다.
  • Loading [ boolean ] - true 인 경우 이미지를 " loading " 상태로 설정합니다.

• Image Update Properties - 이미지 속성 업데이트:
  • Component ID [ string ] - 구성 요소의 식별자.
  • Width [ string ] - 이미지 너비;
  • Height [ string ] - 이미지 높이;
  • Image URL [ string ] - 이미지 URL-주소;
  • Tooltip [ string ] - 마우스 오버 시 표시될 툴팁 문자열.
  • Visible [ boolean ] - 이미지가 보이는지 여부를 정의합니다.
  • Loading [ boolean ] - true 인 경우 이미지를 " loading " 상태로 설정합니다.

사용 예

사용자 프로필 아바타를 로드하는 예를 고려하십시오. 웹 인터페이스는 이미지와 BP를 트리거하는 버튼으로 구성되며 다음과 같습니다.

BP는 onClick 트리거에서 시작합니다. 사용자의 장치 파일 시스템에서 파일을 선택하려면 Select Files 블록이 사용됩니다( Max files = 1 , File types = Image ). 파일이 성공적으로 선택되면 index=0 인 배열 요소가 선택됩니다.

Files 배열의 결과 파일 요소는 나중에 사용할 수 있도록 웹 응용 프로그램 서버에 업로드해야 합니다( Server request POST /_files / ). 요청이 성공하면 Server request POST /_files/ 블록의 출력에 있는 파일 개체가 Expand file 블록의 입력으로 전달되어 ID 를 얻습니다.

URL을 얻으려면 파일 ID 를 가져와서 값을 문자열로 변환해야 합니다( To String ). 상대 파일 경로는 /api/_files//download/ 입니다. 따라서 이미지를 업로드하려면 Image Update Properties 블록의 Image URL 속성에 파일 경로를 전달해야 합니다.

게시된 응용 프로그램은 아래 예에 있습니다.