We compiled our application for Android, but our images located in
src/static are not loading (debugging gives a 404 error).
I tested it with an empty project generated with the CLI: i just added an image in the
src/static folder, and
<img src="/static/test.jpg"> to the popup view. With
npm start, the image is visible; with the compiled app on android, it isn’t. Here’s a screenshot for comparison.
Is that “static” folder the correct location for images?
Is that the correct way to use images?
Do i have to configure webpack in any way? I’ve seen this topic here but i don’t know what to do exactly: How to use image src in my cordova framework7 react app
that change breaks the application with the error:
Module not found: Error: Can't resolve './static/test.jpg' in 'g:\projects\_tmp\template_new\src\components'
Screenshot follows for details:
DAMN that worked…
./static/ be the same as
static/ though? what am i missing?
thanks a lot!!
Not necessarily. ./static/ specifies the current working directory, which during development and testing on PC, is fine since you are coding from your “src” directory.
But after compilation, the build process copies the files to other directories optimized for production. The structure is not the same as your “src” dev directory, hence specifying the current working directory will not work. Omit the leading “/” and let the compiler find the “static” directory relative to the compiled directories.
./static works on build or build && cordova.
Oh ok i understand now, thanks.
If you mean a path relative to the current file (which in my example would be
../static/test.jpg), then yes, it is working everywhere (just tested it).
It’s just a little too tedious to go up with
../.. for every folder indentation.
I was looking for a path relative to the “root” of the project source.
static/ does the trick for me: it’s what i was looking for and expecting with
/static/ (which is the usual way to specify something in the “root of the server”).
Thanks to everyone!