Roson的Qt之旅＃105 QML Image引用大尺寸图片

1.Image控件是不是使用大图片时就报错？

如图，我准备了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"
    }
}

然后执行构建，会看到编译报错了：

导致这个错误的原因是：

添加的资源文件过大，会导致编译无法通过

2.如何解决cc1plus.exe:-1: error: out of memory allocating 1073745919 bytes？

有两种方法：

• 方法1：

将图片添加到qrc资源文件中，然后在工程配置文件也就是.pro文件中添加如下代码：

CONFIG += resources_big

接下来就可以在qml中使用相对路径引用图片了。

• 方法2：

不要将尺寸大的资源文件（图片、音乐、视频）等添加到qrc资源文件中，使用绝对路径来引用图片

3.使用相对路径引用图片代码示例

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"
    }

}

4.使用绝对路径引用图片代码示例

先删除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.