无法在 QML Image 中加载图像源答案

【问题标题】：Can't load Image source in QML Image无法在 QML Image 中加载图像源
【发布时间】：2014-11-25 07:59:52
【问题描述】：

这看起来很基本，但由于某种原因，我无法让图像源在下面的超简单 QML 应用程序中工作。

仅供参考，我正在运行 Mac OS-X 10.9.5，基于 Qt 5.3.2 的 Qt Creator 3.2.1。

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test")

    Image {
        id: image1
        x: 10
        y: 10
        width: 100
        height: 100
        source: "testImage.png"
    }
}

我收到以下错误：

qrc:/main.qml:10:5: QML Image: Cannot open: qrc:/testImage.png

应用程序窗口已创建，但没有显示图像。我也尝试将图像包装在 Rectangle 中，但这没有帮助。

我在这里做错了什么？

“testImage.png”在项目目录中，我尝试了各种方法来使用资源指定图像路径，绝对、相对，甚至使用 QML UI 设计器手动指定图像源。

我还要提到，为了让 Qt 5.3.2 工作，我遵循了建议的修改 HERE。

谢谢。

【问题讨论】：

doc.qt.io/qt-5/qml-qtquick-image.html#source-prop The URL may be absolute, or relative to the URL of the component. qrc URL 是相对的。您也可以使用 file:///home/user/testImage.png ，或者您可以定义自己的 QQuickImageProvider 来处理您自己的方案，例如Image { source: "image://myimageprovider/testImage.png" }

标签： image qt qml

【解决方案1】：

我想您的qml 文件在资源中，所以尝试将您的testImage.png 图像也放入资源中。重新编译应用程序，运行它并检查图像是否正常工作。

所有人都应该在一起。例如：

我的代码：

Image
{
    source: "images/earth.png"

如果我从资源中删除此图像，我也会收到此错误，但图像仍在文件系统中的正确位置。

当qml 源放置在资源中时，从qml 加载的所有文件也应该在资源中（Qt 在资源中搜索此文件，而不是在文件系统中）。

【讨论】：

太棒了，成功了！好像我以前做过一百万次，但不记得需要添加资源。谢谢！
如果你把图片放在qrc资源文件中并按如下方式访问它也可以： Image { source: "qrc:/images/earth.png" }
数据本身在哪里？我看到一个“别名”功能，这意味着文件可以是 /home/me/image.jpg，但 qrc 中的名称是 qrc:/images/my_image.jpg。我需要将数据复制到其他地方吗？
"当 qml 源文件放入资源中时，从 qml 加载的所有文件也应该在资源中" 这是不正确的，也不是很有用。有时您需要加载外部图像。例如，如果用户选择要在应用程序某处显示的图像。

【解决方案2】：

如果您从本地文件系统定位，请获取文件路径和前缀“file:”为source = "file:/root/Desktop/Rathod.png"

【讨论】：

【解决方案3】：

我有一个类似的问题并通过以下方式解决：

右键单击您的 qml.qrc，然后选择“打开方式”->“资源编辑”
在资源编辑器中点击“添加丢失的文件”，然后选择您的图片
最后在设计编辑器中打开你的 qml 文件并点击图片元素，在右侧选择图片的路径

【讨论】：

【解决方案4】：

可能有两个问题：

图像已损坏，尽管图像在所有预览中都正确显示IconImage 拒绝加载它。尝试使用另一个被称为正常工作的图像看来Qt Image loader对图片格式很敏感。
存在资源缓存问题。尝试删除编译文件夹中的qml_qmlcachea.qrc，然后重试

【讨论】：

【解决方案5】：

如果您使用的是 qrc，请确保将图像添加到您的项目中。仅将它放在源目录中可能还不够。例如，我的 main.qml 位于特定目录中。我将我的 .png 移动到同一目录中。然后我“添加现有文件..”并将 .png 添加到项目中。我的图片有以下内容

source:"qrc:<same dir as main.qml>/image.png"

【讨论】：

【解决方案6】：

尝试在 Projects->Build Settings 下关闭 Shadow Build。

【讨论】：

Alfredo 的方法解决了我同样的问题。试试看。