Emscripten编译qt应用不显示图像

Question

我有一些 Qt 国际象棋应用程序。当我使用 VS 编译器或 gcc 构建它时一切正常，但我在使用 emscripten 的 Web 程序集版本上遇到问题。当我运行 html 和 em运行一切正常，但图像就是不显示。

我的 emscripten 版本是 emcc（Emscripten gcc/clang-like 替换）1.38.30（提交 d33f7a29002a2463a7956cd53a559b97a52f9560）。

我的qmake版本：QMake 3.1版

我的Qt版本：使用Qt版本5.13.0

我正在使用来自在线 linux wasm 安装程序的官方 Qt 二进制文件。

我正在使用 em运行 --no_browser .html 命令在本地主机上设置服务器。

我尝试了不同种类的路径规范。我以这个代码示例结束，工作正常但不适用于 Web 程序集版本。这是加载示例图像的代码。

...
QDir::setSearchPaths("qrc", QStringList(":/"));
return QIcon(QUrl("qrc:///Images/king_white.svg").toString());

这是我的 .qrc 文件：

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file>Images/king_black.svg</file>
    ...
</qresource>
</RCC>

在 .pro 文件中我还有：

RESOURCES = resources.qrc

当我不使用 emscripten 时它工作正常。感谢您的帮助。

编辑：构建选项（来自 qmake 生成的 Makefile）

CC            = emcc
CXX           = em++
DEFINES       = -DQT_NO_DEBUG -DQT_WIDGETS_LIB -DQT_GUI_LIB -DQT_CORE_LIB
CFLAGS        = -pipe -O3 -s ALLOW_MEMORY_GROWTH=1 -Wall -W $(DEFINES)
CXXFLAGS      = -pipe -O3 -std=gnu++1y -s ALLOW_MEMORY_GROWTH=1 -Wall -W $(DEFINES)
INCPATH       = -I. -I../../Qt513/5.13.0/wasm_32/include -I../../Qt513/5.13.0/wasm_32/include/QtWidgets -I../../Qt513/5.13.0/wasm_32/include/QtGui -I../../Qt513/5.13.0/wasm_32/include/QtCore -I. -I/home/somas/.emscripten_ports/openssl/include -I../../Qt513/5.13.0/wasm_32/mkspecs/wasm-emscripten
QMAKE         = /home/somas/Qt513/5.13.0/wasm_32/bin/qmake
DEL_FILE      = rm -f
CHK_DIR_EXISTS= test -d
MKDIR         = mkdir -p
COPY          = cp -f
COPY_FILE     = cp -f
COPY_DIR      = cp -f -R
INSTALL_FILE  = install -m 644 -p
INSTALL_PROGRAM = install -m 755 -p
INSTALL_DIR   = cp -f -R
QINSTALL      = /home/somas/Qt513/5.13.0/wasm_32/bin/qmake -install qinstall
QINSTALL_PROGRAM = /home/somas/Qt513/5.13.0/wasm_32/bin/qmake -install qinstall -exe
DEL_FILE      = rm -f
SYMLINK       = ln -f -s
DEL_DIR       = rmdir
MOVE          = mv -f
TAR           = tar -cf
COMPRESS      = gzip -9f
DISTNAME      = ChessNewGeneration.js1.0.0
DISTDIR = /home/somas/ChessNewGeneration/ChessNewGeneration/.tmp/ChessNewGeneration.js1.0.0
LINK          = em++
LFLAGS        = -s WASM=1 -s FULL_ES2=1 -s USE_WEBGL2=1 -s NO_EXIT_RUNTIME=0 -s ERROR_ON_UNDEFINED_SYMBOLS=1 --bind -s "BINARYEN_TRAP_MODE='clamp'" -O3 -s ALLOW_MEMORY_GROWTH=1
LIBS          = $(SUBLIBS) /home/somas/Qt513/5.13.0/wasm_32/plugins/platforms/libqwasm.a /home/somas/Qt513/5.13.0/wasm_32/lib/libQt5EventDispatcherSupport.a /home/somas/Qt513/5.13.0/wasm_32/lib/libQt5FontDatabaseSupport.a /home/somas/Qt513/5.13.0/wasm_32/lib/libqtfreetype.a /home/somas/Qt513/5.13.0/wasm_32/lib/libQt5EglSupport.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqgif.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqicns.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqico.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqjpeg.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqtga.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqtiff.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqwbmp.a /home/somas/Qt513/5.13.0/wasm_32/plugins/imageformats/libqwebp.a /home/somas/Qt513/5.13.0/wasm_32/lib/libQt5Widgets.a /home/somas/Qt513/5.13.0/wasm_32/lib/libQt5Gui.a /home/somas/Qt513/5.13.0/wasm_32/lib/libqtlibpng.a /home/somas/Qt513/5.13.0/wasm_32/lib/libqtharfbuzz.a /home/somas/Qt513/5.13.0/wasm_32/lib/libQt5Core.a /home/somas/Qt513/5.13.0/wasm_32/lib/libqtpcre2.a   
AR            = emar cqs
RANLIB        = 
SED           = sed
STRIP         =

Answer 1

我假设 "when I am not using emscripten" 表示常规，dynamically-loaded Qt。此类安装中包含的图像格式插件是动态库，可以由 Qt 按需加载 - 如果需要，这是用于加载 svg 格式插件的机制。

emscripten Qt 构建目前只是静态库 - 这些必须提前链接在一起，因为它们不能在需要时动态加载。为了让 qmake 知道你需要哪些插件，添加

QTPLUGIN += qsvg

到您的项目文件。您可能希望 wasm-specific 避免干扰其他平台：

wasm {
    QTPLUGIN += qsvg
}

Emscripten编译qt应用不显示图像

Emsripten compiled qt application does not show images

c++

qt

emscripten

webassembly