QT 添加图片资源显示图片

红太狼 2023-01-04 14:53 206阅读 0赞

本文基于QT Creator4.4.1

## **一.在QT中如何显示图片** ##

比如在一个QLabel上显示一个图片

MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    
        QString filename("E:\\image1.png");
        QImage* img=new QImage;
        img->load(filename);
        ui->imageLabel->setPixmap(QPixmap::fromImage(*img));
    }

直接使用绝对路径，来展示图片，效果图如下：

![20210110231108468.png][]

## 二.使用资源文件的形式加载图片 ##

qt提供了qrc资源文件供我们使用，接下来看下如何通过资源文件qrc来显示图片

**第一步：先把图片保存到自己的工程目录下**

图片名称为image1.png，我这里放在了image文件夹中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70][]

**第二步：添加qrc资源文件**

选中项目右键，添加新文件

![20210110232556914.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 1][]

选择Qt Resource File，点击Choose

然后给资源文件qrc取个名字，我这里取的名字是image：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 2][]

然后下一步，完成。完成后刷新下项目，会发现项目下面会多出一个image.qrc,如下图：

![20210110232858980.png][]

同时，工程目录下会多出一个image.qrc文件，然后pro项目文件中会自动加上一个RESOURCE+=\\image.qrc

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 3][]

至此，资源文件创建完毕

**第三步：给资源文件添加具体图片**

右键image.qrc，Open  in Editor

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 4][]

然后会显示image.qrc这个窗口，在下面有一个添加按钮，点击添加->添加前缀

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 5][]

然后在下面的窗口中输入你要的前缀，我输入的是\\pic，如下图：

然后，就可以点击添加->添加文件。此时会弹出选择框让我们选择。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 6][]

这个时候我们选择在第一步存好的图片，就添加完成了，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 7][]

**第四步：使用图片并显示**

我们选择设计模式，在窗口界面中，选中要显示图片的label （效果如下图蓝色虚框），右键--->修改样式表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 8][]

然后在编辑样式表的窗口中，点击添加资源->background image，选择我们刚刚创建的image.qrc资源文件，选择刚刚添加的图片，如上图。点击OK

看下效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 9][]

# 总结： #

第一种方式直接用代码，绝对路径没什么好说的，直接操作就好了

但是实际开发中更多的会使用第二种，一个qrc文件中可以包含多个图片多个前缀、qrc文件类似于一个资源集合的文件

个人觉得比较难用的是这个添加前缀，这个前缀有点多余和难以操作，如果是第一次操作，面对这个添加前缀可能一脸懵逼，不知道意义在哪里

实际上必须先添加前缀才能添加文件，这个交互说实话QT做的没有VS好

[20210110231108468.png]: /images/20221119/d0dabb604d2d4f55aee167e6c1c894d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70]: /images/20221119/3cf4964b8f8b4edab81a135301bac17e.png
[20210110232556914.png]: /images/20221119/b9a1ba90d9804f32866885ed983d7b62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 1]: /images/20221119/f3a23dc0ad4146fcb403d9afcf5eb1ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 2]: /images/20221119/1fab709c4c0d43e99b6bee7b08f5f887.png
[20210110232858980.png]: /images/20221119/fe3fed53c4ca4d32ad6d38e775e9a327.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 3]: /images/20221119/32ed5ddc1af34884afcde1fa43fd32f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021011023322132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210110233255669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210110233554689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210110234626367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210110234928726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210110235121430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djYzI3ODU3Mjg1,size_16,color_FFFFFF,t_70