QML Image获取图片资源路径的细节

最新推荐文章于 2024-06-23 17:55:27 发布
最新推荐文章于 2024-06-23 17:55:27 发布
阅读量7.8k 收藏 2
点赞数 7
分类专栏： 嵌入式 Qt 文章标签： QML Qt Image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbmoxia/article/details/40780493
版权
本文记录了在使用QML加载本地图片资源时遇到的问题及解决过程。错误提示为“QML Image: Cannot open: qrc:///images/Blue hills.jpg”。通过检查路径、尝试加载网络图片排除Qt本身问题，最终发现*.qrc资源文件未包含图片路径。手动添加图片路径到qrc.qrc文件或通过QtCreator将图片资源添加到工程中解决了问题。
摘要由CSDN通过智能技术生成

近期重新开始Qt5，在学到QML获取本地图片资源时总是遇到类似 “ QML Image: Cannot open: qrc:///images/Blue hills.jpg ”的错误，即无法正常载入本地的图片资源，经过一般努力，终于搞定拉！特此记录下来，方便自己和各位同仁查询！

参考：http://mobile.51cto.com/symbian-261878.htm

 

一开始遇到问题的时候在网上搜索了些久都没成功解决问题，不过倒是有些启发，比如在上面网址看到的资料中就多少有些体会。

在这里先贴出本人的小例子：

Rectangle {
 
    id: rec
    width: 800
    height: 600
    opacity: 1
 

    Image

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  xbmoxia
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    7
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
QML入门教程(15)：图元控件Image

				
			

			

				

					琅嬛福地
				

				

					03-21
					
					2701
					
				

			

		

		

			
				
qml的图元控件是Image, 基本使用如下：
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Image{
        id:img
        width:400
        height: 400
  

			
		

	



                

              
                



	

		

			

				
					
QML Image获取资源路径的细节

				
			

			

				

					08-30
				

			

		

		

			
				
以下是对QML `Image`组件获取资源路径的详细分析：  首先，`Image`组件的`source`属性用于指定图像的URL路径。这个路径可以是绝对路径、相对路径、Qt资源系统的路径或者是网络URL。例如：  ```qml Image {  width: ...

			
		

	



                


  
              

                


	

		

			

				
					
踩坑记录：QML加载图片资源

				
			

			

				

					探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
				

				

					05-05
					
					2769
					
				

			

		

		

			
				
踩坑记录：QML加载图片资源

			
		

	





	

		

			

				
					
【QML】用 Image(QQuickPaintedItem) 显示图片

					
最新发布

				
			

			

				

					江湖人称菠萝包
				

				

					06-23
					
					638
					
				

			

		

		

			
				
大体功能：


频繁地往界面推送图片，帧率达到视频效果。
捕获画布上的鼠标事件和键盘事件。


代码如下：

// DrawImageInQQuickPaintedItem.pro 代码如下：
QT += quick

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DE

			
		

	



		

			
		



	

		

			

				
					
QML Image Element

				
			

			

				

					sbisyju的专栏
				

				

					06-29
					
					6444
					
				

			

		

		

			
				
QML Image Element
The Image element displays an image in a declarative user interface More...
Image元素在一个声明式的用户接口中显示一张图片。
Inherits Item
Inherited by AnimatedImage.


List of all members, includi

			
		

	





	

		

			

				
					
QML类型：Image、Text

				
			

			

				

					hw5230的博客
				

				

					07-05
					
					372
					
				

			

		

		

			
				
图像类型显示图像。可显示所有Qt支持的图像格式。

			
		

	





	

		

			

				
					
qml + opencv，实现qml播放打开usb及网络摄像头

				
			

			

				

					11-29
				

			

		

		

			
				
 在QML中，可以使用`Image`或`Quick2DRenderer`组件来显示由OpenCV处理的视频帧。每次捕获到新的视频帧时，通过触发信号更新QML组件的源数据，实现视频的实时显示。  6. **事件处理**：  通过绑定QML的信号和槽，...

			
		

	





	

		

			

				
					
qml for ios相册查看方案

				
			

			

				

					03-01
				

			

		

		

			
				
每个项目可以是Image元素，其source属性指向相册中的图片路径。使用Loader或者Component可以实现动态加载和异步处理图片，以提高性能和用户体验。  **5. 图片预览与选择** 当用户点击图片缩略图时，可以弹出一个全屏...

			
		

	





	

		

			

				
					
QML编写简单的图片查看器

				
			

			

				

					08-09
				

			

		

		

			
				
QML编写简单的图片查看器。一个典型的Qml小例子，希望对初学qml朋友有所帮助。

			
		

	





	

		

			

				
					
一个关于C++与qml交互的demo ：从C++传输一个listmode的方法。

				
			

			

				

					03-15
				

			

		

		

			
				
在QML中，我们可以像这样访问图片路径：  ```qml import QtQuick 2.0  QuickView {  id: qmlView  source: "main.qml" // 包含4张图片的QML文件  engine.rootContext().setContextProperty("imageProvider", ...

			
		

	





	

		

			

				
					
QML之Image

				
			

			

				

					秋殇阁
				

				

					01-10
					
					9666
					
				

			

		

		

			
				
Image控件可以用来显示图片，当然必须是qt支持的图片格式，比如Jpg，Png等等。当然，这里说的图片是静态图片，如果你要显示gif这种格式的图片，那么只能将gif的第一帧显示出来。



    Image {
        id: name
        width: 120 //图像宽度
        height: 120 //图像高度
        anchors.center

			
		

	





	

		

			

				
					
qml显示本地照片

				
			

			

				

					
				

				

					10-24
					
					1439
					
				

			

		

		

			
				
用QML显示本地的照片时，无论是用相对路径还是绝对路径都显示失败。后来想到在公司的经验，想到调试代码时发现照片会添加"file:///"前缀。所以，就尝试添加上，并使用绝对路径的方式。结果成功了。


原因可以参考：https://www.oschina.net/question/54100_33476

另外一种显示图片方式：drawImage
不过，得先用loadIm...

			
		

	





	

		

			

				
					
qml Image显示网络图片

				
			

			

				

					chenyijun的专栏
				

				

					09-15
					
					1170
					
				

			

		

		

			
				
Qt显示图片时必须是本地的或者qrc资源文件里的图片，而qml的Image确可以显示网络的图片，这是一个大的优势，不用下载图片到本地。下面请看源码示例：


import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("qml显示网络图片")

    Image {
        id: imageHeader
     

			
		

	





	

		

			

				
					
qml 图像image

				
			

			

				

					qq_33373173的博客
				

				

					11-21
					
					6671
					
				

			

		

		

			
				
image只能显示静态图片 image继承于item，所以无需导入控件库即可使用
属性
currentFrame: 保存当前可见帧，默认值为0，如果图像包含多个帧，则可以将其设置为介于0和frameCount-1之间的数字来显示不同的帧（Qt5.14引入的）
frameCount: 保存图像中的帧数。大多数图像只有一帧（Qt5.14引入的）
horizontalAlignment/verticalAlignment：设置图像的水平和垂直对齐方式
paintedHeight/paintedHeight：(只.

			
		

	





	

		

			

				
					
QML中的Image

				
			

			

				

					QtCompany的博客
				

				

					04-22
					
					723
					
				

			

		

		

			
				
然后，在Item元素内部，我们创建了一个Image元素，并将其source属性设置为“image.png”，这表示我们要从本地文件加载名为“image.png”的图像。最后，我们将Image元素的anchors.fill属性设置为parent，以使图像充满整个父元素。与其他QML元素一样，可以通过属性来控制图像的位置、大小、旋转角度、透明度等。除了source和anchors属性外，Image元素还有许多其他属性，例如smooth、asynchronous等，它们可以进一步控制图像的呈现方式和性能。

			
		

	





	

		

			

				
					
【qml】Image 显示网络图片

				
			

			

				

					读书笔记
				

				

					10-15
					
					995
					
				

			

		

		

			
				
Image类型可以用来显示一个图像。使用source属性将图像的源指定为一个URL。可以用Qt支持的任何标准图像格式提供图像，包括位图格式(如PNG和JPEG)和矢量图形格式(如SVG)。如果你需要显示动画图像，使用AnimatedSprite或AnimatedImage。如果没有指定宽度和高度属性，图像将自动使用已加载图像的大小。默认情况下，指定项目的宽度和高度将使图像缩放到该大小。这种行为可以通过set来改变。

			
		

	





	

		

			

				
					
QML  怎么获取文件夹的图片名称

				
			

			

				

					05-19
				

			

		

		

			
				
在 QML 中，你可以使用 `FolderListModel` 组件来获取文件夹中的文件列表。这个组件会将文件夹中的所有文件和子文件夹都列出来，并提供它们的文件名、路径和其他属性。

下面是一个简单的例子，展示了如何使用 `FolderListModel` 组件来获取文件夹中的图片名称：

```qml
import QtQuick 2.0
import Qt.labs.folderlistmodel 2.1

Rectangle {
    width: 400
    height: 400

    FolderListModel {
        id: imageModel
        folder: "/path/to/folder"
        nameFilters: ["*.jpg", "*.png"] // 只显示 JPG 和 PNG 格式的图片
    }

    ListView {
        anchors.fill: parent
        model: imageModel
        delegate: Text {
            text: model.fileName
        }
    }
}
```

在这个例子中，我们创建了一个 `FolderListModel` 组件，并设置它的 `folder` 属性来指定要获取文件列表的文件夹路径。我们还使用 `nameFilters` 属性来过滤掉非图片文件，并只显示 JPG 和 PNG 格式的图片。

然后，我们使用一个 `ListView` 组件来显示文件列表，并使用 `Text` 组件作为委托来显示每个文件的文件名。你可以根据需要修改这个例子，来满足你的具体需求。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值