Image paths are "wrong" on html and css (production)


#1

Hi all,

There is a long standing file path bug in ionic. If I build in production, a true image path to my resources directory is not working. For example:

<img src="../../../../assets/images/image.png" alt="not working in production" />

But if I change it to:

<img src="./assets/images/image.png" alt="not working in production" />
Or
img { background-image: url(../assets/images/image.png') }

then it works, because after the build, this are the paths on the www directory. The problem is that my IDE is marking this (still) not existing path as an error.

My question is should it be considered a bug? Should an issue be opened? I couldn’t find any issue on that on the repo.

related:


#2

What does “in production” mean here?
What commands work, what commands don’t work?

This path just doesn’t exist. assets is in the same folder as your built app.


#3
  1. In production means with --prod flag. In that case the images paths are broken.
  2. I will clarify my perspective: when I build an Angular program, I use relative paths that the IDE can recognize and offer autocomplete, correction, etc. When I build an Ionic app, I have to use absolute paths. What I want is to be able to use the Angular style relative paths in my Ionic projects. I know this paths don’t exist after a build, but think the build process can and should correct the paths to the images.

#4

Feel free to create a Pull Request on ionic app-scripts and implement this behaviour. Sounds useful.