Issues with path for image not running on build

It just seems the simplest of things such as using the correct url path for an image can consume so much time and effort with no success at all.

So, in my homepage I tried to use one of the following:
< img src="…/assets/img/image.jpg"/>
< img src="/assets/img/image.jpg"/>
< img src=“assets/img/image.jpg”/>
< img src="./assets/img/image.jpg"/>
< img src="…/…/assets/img/image.jpg"/>

All of which display on the browser and but not on the device.

I’ve read so many threads and it is disgraceful that yet there is no real solution to this. I would really like to know what it is I am doing wrong here? Any helps and real solutions would be very much appreciated.

i think 1st and 3rd should work both on mobile and browser

As you know I have tried the above but they don’t seem to display on device.

Have you checked your developer tools to see what URL they’re requesting, and how it compares to the actual location of the image?

@ascorbic in browser developer tools? The image displays in browser (ionic serve), just not on device.

In remote dev tools. i.e. Chrome remote device developer tools, or Safari remote web inspector.

@miahs See if your platform specific directory has all your images (for android it should be in [your_project]/platforms/android/assets/www/assets/img), because I think the 3rd should work, unless the images aren’t being copied in the build process.

@lucasbasquerotto I’ve checked that folder and that particular image has not copied over for some reason. What could be causing this?
However, I pasted the image in manually and ran a build again and using < img src=“assets/img/image.jpg”/> but the image still isn’t displaying on device. Any suggestions?

Right I think I know what the cause of the problem is and thanks to @lucasbasquerotto pointing me to files path where I eventually discovered a unique issue.

Tha strange this is the browser chrome displayed it fine. Anyway, problem now solved and thanks to all for contributing.

I’d like to respond to the meta question “Why can’t things just work in Ionic?”

First, I’m pretty sure this isn’t just Ionic, every framework or tool has a learning curve and has its quirks, even when it’s just a drag and drop no-code tool. By using the tool and by building stuff you learn all of the tricks which is called “experience”.

The reason why things “don’t just work” is that software (and hardware, and any non-trivial system, a chemical plant, the human body) is incredibly complex, layers on layers on layers and innumerable use cases and exceptions to those to handle.

(it’s kind of amazing that it works at all)

I’m inclined to say this is actually a good thing, if it was so easy that anyone including your mother in law (assuming she didn’t graduate in computer science) could do it then for sure you would not be able to command the hour tariff that you can.

Second, in my opinion Ionic has THE best community/forum bar none, this makes it an order of magnitude easier to solve problems.

Third, try to develop mobile apps with Objectve C/Swift/Android SDK, then you will know what “difficult” means. If it wasn’t for something as easy as Ionic then I probably wouldn’t bother developing mobile apps at all, it’s way too much work.

@leob I’m sorry if you feel that I am having a pop at the Ionic Team but this is not the case, in fact very wrong. Ionic has been a revelation as you put it, trying to work with Swift/Objective C is no easy task. I am grateful that we have Ionic. My frustration was bourne by the fact that I couldn’t get one simple thing to work. I’m sure a lot of people have also experienced similar frustrations in trying to get something to work. I therefore do not need the lowdown or a lecture from you about the ‘learn from experience’ mantra, I know and understand this fully well :slight_smile:

It wasn’t meant as a lecture, neither as criticism at Ionic, apologies if it came across like that because that wasn’t my intention.

It was just some philosophical rambling which I like to do now and then. Yes, kudos to the Ionic team for everything they do and for the great community around it, like I said if it wasn’t for Ionic then I wouldn’t bother with developing mobile apps at all (seeing how saturated the market is already).

Yes and of course I also regularly run into frustrating stuff like this, although often the issue isn’t even with Ionic but with Cordova, Android, iOS and so on (currently I’m pulling my hair out figuratively because my iPhone deems it necessary to ask me to agree to the iCloud terms and conditions every 30 seconds, it’s stuck in a loop).

In fact I would say that other parties (I’m looking at you, Apple) are making the developer’s life a hundred times more difficult than the Ionic team ever could.

To work as a css background image I had to do this

  background-image: url("../assets/img/image.png");

Sorry for going off topic regarding the issue but can someone explain what the difference is between those 5 paths. I tried getting a hang of pathing before but the information I found was never clear enough for understand what is going on. For example I’ve always thought that if path 3 works then 4 works as well but I’m not sure anymore.

Another question, isn’t it very annoying that ionic serve uses a different assets location in comparison to the built mobile application?