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

Look & Feel

01_lookNfeel

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

1

  • 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 " 상태로 설정합니다.

03_getProperties

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

04_setProperties

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

05_updateProperties

사용 예

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

06_example_ui

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

07_example_1

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

07_example_2

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

07_example_3

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

result

Was this article helpful?

앱마스터.io 101 단기 특강

10 모듈
2 주

어디서부터 시작해야 할지 모르겠다고요? 초보자를 위한 단기 집중 과정을 시작하고 AppMaster를 A부터 Z까지 살펴보세요.

코스 시작
Development it’s so easy with AppMaster!

도움이 더 필요하세요?

전문가의 도움으로 모든 문제를 해결하십시오. 시간을 절약하고 애플리케이션 구축에 집중하십시오.

headphones

연락처 지원

문제에 대해 알려주시면 해결책을 찾아드리겠습니다.

message

커뮤니티 채팅

채팅에서 다른 사용자와 질문에 대해 토론하십시오.

커뮤니티 가입