Emsripten compiled qt application does not show images

Question

I have some Qt chess application. Everything works fine when i build it using VS compiler or gcc but I have problem with web assembly version using emscripten. When i run html with emrun everything is ok but images just does not show up.

My emscripten version is emcc (Emscripten gcc/clang-like replacement) 1.38.30 (commit d33f7a29002a2463a7956cd53a559b97a52f9560).

My qmake version: QMake version 3.1

My Qt version: Using Qt version 5.13.0

I am using official Qt binaries from online linux installer for wasm.

I am using emrun --no_browser .html command to set up server on localhost.

I tried different kinds of paths specification. I ended up with this code example, works ok but not with web assembly version. This is code to load an example image.

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

this is my .qrc file:

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

in .pro file I also have:

RESOURCES = resources.qrc

It works okay when I am not using emscripten. Thanks for help.

EDIT: Build options (from Makefile generated by qmake)

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

I presume that by "when I am not using emscripten" means the regular, dynamically-loaded Qt. Image format plugins included in such installations are dynamic libraries and can be loaded on demand by Qt - this is the mechanism used to load the svg format plugin if it is required.

The emscripten Qt builds are currently only static libraries - these must be linked together in advance as they cannot be dynamically loaded when required. In order to make qmake aware which plugins you will need, add

QTPLUGIN += qsvg

to your project file. You will probably want to make it wasm-specific to avoid interference on other platforms:

wasm {
    QTPLUGIN += qsvg
}