如图,我准备了3个大尺寸的图片,想要在界面上显示出来,如是就把他们添加到了资源文件中:
然后编写qml代码:
- import QtQuick 2.9
- import QtQuick.Window 2.2
- import QtQuick.Controls 2.2
- import QtQuick.Controls 1.4
-
-
- Window {
- id:myWindow
- visible: true
- width: 640
- height: 480
- title: qsTr("Hello World")
-
-
- Image {
- id: myImg1
- width: myWindow.width
- height: myWindow.height
- source: "Resource/20211205_IMG_8727.JPG"
- }
- }
然后执行构建,会看到编译报错了:
导致这个错误的原因是:
添加的资源文件过大,会导致编译无法通过
有两种方法:
将图片添加到qrc资源文件中,然后在工程配置文件也就是.pro文件中添加如下代码:
CONFIG += resources_big接下来就可以在qml中使用相对路径引用图片了。
不要将尺寸大的资源文件(图片、音乐、视频)等添加到qrc资源文件中,使用绝对路径来引用图片
- import QtQuick 2.9
- import QtQuick.Window 2.2
- import QtQuick.Controls 2.2
- import QtQuick.Controls 1.4
-
-
- Window {
- id:myWindow
- visible: true
- width: 640
- height: 480
- title: qsTr("Hello World")
-
-
- Image {
- id: myImg1
- width: myWindow.width
- height: myWindow.height
- source: "Resource/20211205_IMG_8727.JPG"
- }
-
- }
先删除qrc中添加的大图片,并保存
- import QtQuick 2.9
- import QtQuick.Window 2.2
- import QtQuick.Controls 2.2
- import QtQuick.Controls 1.4
-
-
- Window {
- id:myWindow
- visible: true
- width: 640
- height: 480
- title: qsTr("Hello World")
-
- TabView {
- id:myTab
- width: myWindow.width
- height: myWindow.height
-
- Tab {
- title: "Img1"
- Image {
- id: name1
- width: myWindow.width
- height: myWindow.height-50
- source: "file:///E:/02_Code/gitee/RosonPlayer/Resource/20211205_IMG_8727.jpg"
- }
- }
- Tab {
- title: "Img2"
- Image {
- id: name2
- width: myWindow.width
- height: myWindow.height-50
- source: "file:///E:/02_Code/gitee/RosonPlayer/Resource/20211205_IMG_8732.jpg"
- }
- }
- Tab {
- title: "Img3"
- Image {
- id: name3
- width: myWindow.width
- height: myWindow.height-50
- source: "file:///E:/02_Code/gitee/RosonPlayer/Resource/20211205_IMG_8737.jpg"
- }
- }
- }
- }
注意:
编译版本选择Debug时,编译出来的程序,有1张图片显示不出来,换成release版本重新编译后,就正常了,原因没有深究,感觉像是QT的BUG.