Emsripten编译的Qt应用程序不显示图像

Question

我有一些Qt国际象棋应用程序。当我使用VS编译器或gcc进行构建时，一切正常，但是使用emscripten的Web程序集版本存在问题。当我使用emrun运行html时，一切正常，但图像未显示出来。

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

我的qmake版本：QMake 3.1版

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

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

我正在使用emrun --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

我认为“当我不使用 emscripten 时”是指常规的、动态加载的 Qt。此类安装中包含的图像格式插件是动态库，可以通过 Qt 按需加载 - 这是用于在需要时加载 svg 格式插件的机制。

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

QTPLUGIN += qsvg

到您的项目文件。您可能希望使其特定于 wasm 以避免对其他平台的干扰：

wasm {
    QTPLUGIN += qsvg
}