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


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

    如图,我准备了3个大尺寸的图片,想要在界面上显示出来,如是就把他们添加到了资源文件中:

    然后编写qml代码:

    1. import QtQuick 2.9
    2. import QtQuick.Window 2.2
    3. import QtQuick.Controls 2.2
    4. import QtQuick.Controls 1.4
    5. Window {
    6. id:myWindow
    7. visible: true
    8. width: 640
    9. height: 480
    10. title: qsTr("Hello World")
    11. Image {
    12. id: myImg1
    13. width: myWindow.width
    14. height: myWindow.height
    15. source: "Resource/20211205_IMG_8727.JPG"
    16. }
    17. }

    然后执行构建,会看到编译报错了:

    导致这个错误的原因是:

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

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

    有两种方法:

    • 方法1

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

    CONFIG += resources_big

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

    • 方法2

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

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

    1. import QtQuick 2.9
    2. import QtQuick.Window 2.2
    3. import QtQuick.Controls 2.2
    4. import QtQuick.Controls 1.4
    5. Window {
    6. id:myWindow
    7. visible: true
    8. width: 640
    9. height: 480
    10. title: qsTr("Hello World")
    11. Image {
    12. id: myImg1
    13. width: myWindow.width
    14. height: myWindow.height
    15. source: "Resource/20211205_IMG_8727.JPG"
    16. }
    17. }

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

    先删除qrc中添加的大图片,并保存

    1. import QtQuick 2.9
    2. import QtQuick.Window 2.2
    3. import QtQuick.Controls 2.2
    4. import QtQuick.Controls 1.4
    5. Window {
    6. id:myWindow
    7. visible: true
    8. width: 640
    9. height: 480
    10. title: qsTr("Hello World")
    11. TabView {
    12. id:myTab
    13. width: myWindow.width
    14. height: myWindow.height
    15. Tab {
    16. title: "Img1"
    17. Image {
    18. id: name1
    19. width: myWindow.width
    20. height: myWindow.height-50
    21. source: "file:///E:/02_Code/gitee/RosonPlayer/Resource/20211205_IMG_8727.jpg"
    22. }
    23. }
    24. Tab {
    25. title: "Img2"
    26. Image {
    27. id: name2
    28. width: myWindow.width
    29. height: myWindow.height-50
    30. source: "file:///E:/02_Code/gitee/RosonPlayer/Resource/20211205_IMG_8732.jpg"
    31. }
    32. }
    33. Tab {
    34. title: "Img3"
    35. Image {
    36. id: name3
    37. width: myWindow.width
    38. height: myWindow.height-50
    39. source: "file:///E:/02_Code/gitee/RosonPlayer/Resource/20211205_IMG_8737.jpg"
    40. }
    41. }
    42. }
    43. }

    注意

    编译版本选择Debug时,编译出来的程序,有1张图片显示不出来,换成release版本重新编译后,就正常了,原因没有深究,感觉像是QT的BUG.

  • 相关阅读:
    文心一言 VS 讯飞星火 VS chatgpt (120)-- 算法导论10.3 5题
    微信:H5如何返回至小程序
    pollFirst(),pollLast(),peekFirst(),peekLast()
    基于python的GUI设计
    LeetCode刷题(12)
    让pandas速度提升10倍从apply到parallel_apply
    堆排序算法
    统计官方模型的参数量和计算量
    5个物联网商业案例及其带给我们的启示
    49. 视频热度问题
  • 原文地址:https://blog.csdn.net/jolin678/article/details/126088768