[C++,QT/Qml]5. Qml 프로그래밍Image 추가하기(절대경로,상대경로)

[C++,QT/Qml]5.Qml프로그래밍Image추가하기1(절대경로,상대경로)

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다.

 

오늘은 QT에 이미지를 추가하는 방법에 대해서 포스팅 하겠습니다.

 

이미지 추가하는 방법에는 2가지 방법이 있습니다.

 

절대 경로로 추가하는 방법이 있고 상대 경로로 추가하는 방법이 있습니다.

 

절대경로는 현재 이미지가 있는 경로를 따라가서 찾아주는 것이고 

 

상대 경로는 현재 프로젝트의 파일기준으로 이미지의 위치를 찾아주는 것 입니다.

 

QT에서는 이미지를 상대 경로로 찾게하려면 프로젝트에 추가를 해야합니다.

 

그러나 이미지를 프로젝트에 추가하면 빌드할때 리소스가 추가가되어서 그만큼 빌드 시간이 길어집니다.

 

이미지를 적게 쓰면 상관이 없지만 이미지를 많이 쓰게되면 상대경로로 찾아서 이미지를 프로젝트에 추가시키지

 

않는 것이 좋습니다.

 

필자도 프로젝트에 이미지를 많이쓰는 프로젝트였는데 이 이미지를 프로젝트에 모두 추가하게 되면 빌드가 1분이상

 

경우가 있어서 이미지를 절대경로로 찾아서 사용하는 것으로 바꾸어 주었습다.

 

 

이미지를 절대경로로 추가하는 방법

 

1.현재 프로젝트에 파일 경로로 간다.(아래 이미지처럼 마우스 오른쪽클릭하면 바로 갈수 있습니다.)

 

2. 추가할 파일을 추가합니다.(현재 프로젝트에 image폴더를 추가해서 이미지를 추가해 주었습니다.) 

 

3. 이미지를 추가하는 코드 삽입

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import "."
 
Window {
    property bool mbtest : true
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Image
    {
        x:0
        y:0
        width:100
        height:100
        source:"file:///home/shin/project/myfirstproject/image/icons8-pause-button-96.png"//이미지를 절대경로로 추가하는 코드        
    }
 
    CustomText
    {
        id:customtext1
        rTextGeometry: Qt.rect(0,150,300,100)
        text:"cutom text1"
    }
    CustomText
    {
        id:customtext2
        rTextGeometry: Qt.rect(0,300,300,100)
        text:"cutom text2"
        bold:false
    }
}
 
 
 

 

 

 

이미지를 상대경로로 추가하는 방법

1. 프로젝트에 이미지를 추가한다.(아래와 같은 방법으로 오른쪽클릭으로 추가해준다.)

 

2. 추가한 이미지 폴더를 프로젝트에 추가해서 프로젝트에 이미지를 추가한다.

3. 추가된 이미지가 프로젝트에 추가된 것을 확인한다.

 

 

4. 상대경로로 이미지를 가져오는 코드를 추가한다. 아와 같이 코드를 삽입 하면 상대경로로 이미지를 가져올수있다.

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import "."
 
Window {
    property bool mbtest : true
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Image
    {
        x:0
        y:0
        width:100
        height:100        
        source:"./image/icons8-pause-button-96.png"//이미지를 상대 경로로 추가하는 방법
    }
 
    CustomText
    {
        id:customtext1
        rTextGeometry: Qt.rect(0,150,300,100)
        text:"cutom text1"
    }
    CustomText
    {
        id:customtext2
        rTextGeometry: Qt.rect(0,300,300,100)
        text:"cutom text2"
        bold:false
    }
}
 
 
 
 
 

위의 코드와 같이 현재 작업하는 qml파일 위치에서 이미지파일 안의 이미지를 추가한다.

 

현재 qml파일위치 즉 ./ 에서 image폴더 안의 원하는 이미지를 추가해줍니다.

 

오늘은 이미지를 절대경로 및 상대경로로 추가하는 방법에 대해서 포스팅을 했습니다.

 

오늘은 포스팅 내용이 엄청 짧았네요 다음 포스팅에는 이미지를 이용해서 마우스 클릭 이벤트를 주고 그 이벤트를

 

받으면 이미지가 변경되는 것을 포스팅 하겠습니다.

 

감사합니다.!