QML 不显示 svg 图像答案

【问题标题】：QML doesn't show svg imagesQML 不显示 svg 图像
【发布时间】：2015-08-27 06:45:42
【问题描述】：

我编写了一个简单的 QML ui，它使用了一些 svg 图像。当我在我的桌面上执行应用程序时，一切都很好，UI 以及上面的 svg 图像都会显示出来。当我尝试在嵌入式设备上执行应用程序（运行嵌入式 Windows）时，就会出现问题。在这种情况下，会显示 UI，但未显示 svg 图像，并且在控制台上我收到以下消息： QML BorderImage：无效的图像数据：my_image.svg

正确显示的是 png 图像。

我在互联网上研究了这个问题，我发现很多人通过在 .pro 文件中添加 svg 和其他依赖项来解决这个问题。不幸的是，这对我没有帮助。这些是我的 .pro 文件的内容：

TEMPLATE = app

QT += qml quick widgets svg xml gui core

QTPLUGIN += qsvg

SOURCES += main.cpp \
    SignalProcessor.cpp \
    PopupMode.cpp \
    BasicToolbarModel.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

HEADERS += \
    SignalProcessor.h \
    PopupMode.h \
    BasicToolbarModel.h

CONFIG += qmltestcase

QUICK_TEST_SOURCE_DIR += Tests

DISTFILES += \
    qml/main.qml \
    qml/CustomToolBar.qml \
    qml/components/BatteryStatus.qml \
    qml/components/ImageButton.qml \
    qml/components/Popup.qml \
    qml/components/WifiStatus.qml \
    qml/pages/PlayButtonView.qml \
    qml/pages/StopButtonView.qml \
    qml/tests/tst_CustomToolBar.qml \
    qml/tests/tst_WifiStatus.qml \
    scripts/Utils.js

编辑：所有的 svg 图像都位于资源文件中

【问题讨论】：

SVG 文件有多大？大小和尺寸？
主要是 128x128 甚至更小，大约 3kb。我认为问题不在于图像的大小，因为 CPU 是 Atom E3845

标签： qt svg qml qt-creator qtquick2

【解决方案1】：

为了显示 SVG 图像，我做了以下工作：

将svg 添加到.pro 文件中：

QT += svg

确保我的Image 有大小：

    height: 400
    width: 400

确保我将源 SVG 设置为大小：

sourceSize.width: 100
sourceSize.height: 100

就是这样。

当我忘记了 QML 文件中的内容时，我会收到如下警告：

W/libnotification.so( 3800): (null):0 ((null)): QOpenGLShaderProgram: could not create shader program
W/libnotification.so( 3800): (null):0 ((null)): QOpenGLShader: could not create shader

修复QML后，模拟器还在报错：

E/OpenGLRenderer( 4435): GL error:  GL_INVALID_VALUE

我必须重新启动模拟器才能让它再次显示。

提示：为了获得正确的视觉质量，与Image 大小相比，不要将sourceSize 设置得太低（由于x4 因素，上述示例可能会产生难看的结果）。

（我正在 Android 模拟器上使用 Qt 5.7 进行测试）。

【讨论】：

感谢sourceSize 提示，救了我！

【解决方案2】：

正如文档所说：

Qt 附带了许多插件，这些插件在需要时在运行时加载。这些可以处理从连接到 SQL 数据库到加载特定图像格式的任何事情。由于插件是在运行时加载的，因此无法检测插件依赖项，但 androiddeployqt 会尝试根据应用程序的 Qt 依赖项来猜测此类依赖项。如果插件有任何不是你的应用程序依赖的 Qt 依赖，默认情况下它不会被包含。例如，为了确保包含 SVG 图像格式插件，您需要将 QT += svg 添加到您的 .pro 文件中，以便 Qt SVG 模块成为您应用程序的依赖项。

您需要使用.pro 文件指示插件依赖项。

【讨论】：

【解决方案3】：

可能遗漏了一些共享库。根据文档，在 Windows 上（我猜甚至在 WinCE 上）您必须部署所有必需的 dll 以及您的应用程序。

Here 是来自 wiki 的关于该主题的有趣页面。

Here你可以在那个网站上找到类似的问题。

This 是另一种可能有用的资源。

【讨论】：

【解决方案4】：

我通过将qsvgicon 添加到QTPLUGIN 解决了类似的问题：

QTPLUGIN += qsvg qsvgicon

它是 QWidget 应用程序，但我认为这个解决方案应该会有所帮助。

【讨论】：

【解决方案5】：

您需要在 .pro 文件中包含这些行

QT += xml svg
QTPLUGIN += qsvg

【讨论】：