Help! Asset paths for all OS types - we need more documentation!

Can we please get a response from the developers, along with either a blog post or a documentation page about how to handle image local assets - images, Javascript includes etc - as there is little to no documentation on how to include a JS library or even a local image.

Even the ion-img documentation cops out of providing example src attributes that might have been helpful.

So far, adding local images to my src/assets folder works using ionic serve, but will only work when running on a device if the leading slash is left off the path.

<!-- This works in a page template on ionic serve & running on device -->
<img src="assets/myimage.png">

<!-- This doesn't work in index.html on a device -->
<script src="assets/myscript.js"></script>

I still haven’t managed to include a JS library into index.html from my assets folder in the same way that worked with an image though - why does this work inconsistently?

Some libraries - older ones specifically - while working with things like google maps and any of the utility libraries, simply need to be included, as they add their goodness to the window object directly. And you can’t import them - they’re not built for module loaders.

Please please please (pretty please) can we get a response on this from the developers as i’ve seen thread after thread and it’s actually causing me to have to delay the push of one of my apps to a client.

Thanks!
Dan.

Provide a test project on Github with assets that are included and don’t work please.

No problem i’ll do that tonight.

My point about this needing some sort of documentation still stands though - it’s not explained thoroughly anywhere really.

But it’s also not a thing that tends to pop up here in the forum over and over again. Some people work with relative or absolute paths for assets which tends to work in ionic serve but not on devices or vice versa, but besides that not many people seem to have a problem here. So I am looking forward to exactly what is going wrong for you.

Did you copy the myscript.js to src/assets folder, its should be in src/assets

not www/assets

Yeah, it’s in src/assets/scripts/myscript.js actually, would putting it into a subfolder of src/assets have anything to do with it?

I’ve hit this issue on several different apps now - apologies to the moderators if my wording came across as heavy handed, the threads i’ve seen about this have been on Stack Overflow as well as this forum, i’ll dig out some links later so it doesn’t just look like i’m poking the fire.

Don’t worry, I also just stated my view and experience on this. If you provide more information or a repro repo we will be happy to help debugging.

You mentioned ion-img. Please note that it’s only intended for use with virtual scroll. People frequently overlook that and try to use it as a generic replacement for img, which doesn’t go well.

1 Like

Ionic really wants you to do this via npm so that it can be included smoothly into the app bundle. If you absolutely can’t find an npm package containing the functionality you want, you can use npm init to npmify what you do have, and npm link to install it locally.

Thanks for that @rapropos - i’ll take a look at that!

Please be clear on your question
where is the file now

it should be <script src="assets/scripts/myscript.js"></script> not?

i do the same in one of my project, it works without any issue

check the screenshots

script2

U may check with chrome inspector ‘networks section’ whether the file is loaded or falied,

if the file is loaded and u cannot use it in your .ts file, please look into this one , a similar topic https://forum.ionicframework.com/t/how-to-use-a-js-file-in-ionic3/89260/8

Thanks all for your help guys.

I finally did put a test project together at:

And everything works as you all say it does - including scripts from assets without a trailing slash appears to work, and so does including images.

Thanks for all the advice and patience while i cleared this up!

Dan.

1 Like

So what exactly did you do wrong in the first post/project? Select your post as the “solution” for this topic, then future readers can also benefit from your learnings.