[PyQt5 QT QML] QtQuick 활용하여 Image 불러오기

개발 환경 구현 : https://donggyu.tistory.com/9

Image 관련 설명 : https://doc.qt.io/qt-5/qml-qtquick-image.html

💡 실행 화면

 

💡 Image 설명

이미지의 소스 는 source 속성을 사용하여 URL로 지정됩니다 . PNG 및 JPEG와 같은 비트 맵 형식 및 SVG와 같은 벡터 그래픽 형식을 포함하여 QT에서 지원하는 모든 표준 이미지 형식으로 이미지를 제공 할 수 있습니다. 

애니메이션 이미지를 표시해야하는 경우 AnimatedSprite 또는 AnimatedImage를 사용해야합니다.

경우 너비 및 높이 속성이 지정되지 않은, 이미지가 자동으로로드 된 이미지의 크기를 사용합니다. 기본적으로 항목의 너비와 높이를 지정하면 이미지가 해당 크기로 조정됩니다. 이 동작은 fillMode 속성 을 설정하여 변경할 수 있으며 대신 이미지를 늘이고 바둑판 식으로 배열 할 수 있습니다.

 

💡 Image 코드 

Image {
    source: "pics/dog"         // 폴더 없이 불러오기
}

Image {
    source: "pics/cat"         // 폴더를 통하여 불러오기
}

코드는 위와 같습니다.

여기서 ID와 크기를 설정할 수 있으며, 오류가 발생하는 경우도 있습니다.

 

💡 cannot open QML Image 코드 오류 시

QML에서는 Image file을 불러올 경우 Image 객체의 property source에 파일 경로를 작성해줘야합니다.

 

id: btn
width: 100
height:200
source: "file:///Users/LG/Desktop/test/image/image.png"

 

💡 QML Image 경로 불러오는법

vscode > image > 마우스 우측 클릭 > 경로 복사 or 상대 경로 복사