In my application I have some local images. I can see my images when test in google developer tools with ionic serve and even in genymotion simulator with android 4.4.4 and 4.2.2. but when I install my app on real android device ( I try on Samsung Galaxy S3 and Samsung Galaxy Ground Neo) I can't see my images.
My folder structure is like this:
www
index.html
app
book
book.html
images
icon.png
and in my book.html I try the following url for loading image:
<img src="app/book/images/icon.png">
<img src="../../images.icon.png">
I also move icon.png to root folder inside index.html and try this:
<img src="icon.png">
but it doesn't work.
The way that HTML structure works is that is that you always need to call your files relative to your current file. For example, if your structure looks like:
- index.html
- folder
-image.png
You would need to say src="image.png". So in your case, you do not have to reference the root directory (folder). You can just say images/icon.png. To reference an upper level folder (if it were in the root), you could say ../../icon.png, using ../ for each subsequent folder.
I had the same problem. my images are stored in www\assets\images. I was using the path ../../assets/images/myimg.png and worked in ripple but not when deployed to my android device.
The solution that worked for me was removing the relative path and using assets/images/myimg.png
Related
What are the possible solutions this problem: I need to include various sound files to a react app (build into a kiosk with nwjs) on app startup.
Let me explain the expected behavior - I have a nwjs kiosk react app that will run on a Windows machine.
It should grab some UNC paths for sounds over rest api on app startup.
I need to include these paths as resources (located outside the src folder) in the app in order to play the sounds.
Is it even possible?
Linking from the project's src folder is clear to me. But how to link paths outside the src folder when I don't even know the paths beforehand?
import OKSound from "./OK.wav";
Thank you!
Looks like there is no issue with playing sounds from "outside" with the audio tag, but it's really playing a sound only after creating an exe with nwjs!
const url = "http://example.com/sound.wav";
<audio autoPlay>
<source src={url} type="audio/wav" />
Your browser does not support the audio element.
</audio>
I developed an application using nodes and angularjs.
I have an html file that I should display an image.
when running the application on localhost, everything work perfectly and the application displays the image.
I used this code for displaying image:
<img ng-src="./app/images/{{idimage}}.jpeg" ></img>
when I do a push for this application to ibmbluemix, the console told me that there are a 404 not found error.
Any idea please for how displaying image using angulars in ibm bluemix.
Thanks for helps
A possible reason for this issue is if you are pushing the app from outside of the app folder by using the manifest path parameter, and when you run your app locally, you also run it from outside the app folder.
After pushing your app, use cf ssh (docs) to get inside your deployed app. You can then take a look around using linux tools like ls to see what folders have been deployed.
My images won't show up on an Angular 2 app on Github Pages. I could see the images during the app's development, but now the relative link returns the error: Failed to Load Resource on inspection.
The image link from development looks like this:
/assets/images/juno.gif
I tried copying the path from repo, but the image still doesn't show
mybiography/src/assets/images/juno.gif
I also tried copying the github link to the image file, but my Angular CLI service redirects me back to the application's home page.
https://github.com/st4rgut22/mybiography/blob/master/src/assets/images/juno.gif
Please advise what I should do, here's the link to the page where the images fail to show upon dropdown selection: https://st4rgut22.github.io/mybiography/work
When using relative path just start src path with ./
Change src="/assets/images/rot.gif" to src="./assets/images/rot.gif"
N.B. ./ denotes the current location
I have a Node.Js App using express and Angular. While developing and running a local server everything worked perfectly.
But once deployed in Heroku, images (vewed in the gallery page) inside sub folders (images/*) just wont load while in Heroku.
When I try to go directly to the image URL the ones directly in the images folder work well:
servicentrov2.herokuapp.com/images/Fondo1.jpg
But the ones in subfolders wont, and show part of the page:
servicentrov2.herokuapp.com/images/galerias/2014Hallel/2014-Hallel-01.jpg
I think it might be that:
1. the sub folders are not available in server
2. some routing problem
The code is in https://github.com/blogcraft/Servicentro2.0
The Heroku app is in https://servicentrov2.herokuapp.com
Any help will be appreciated :)
You have the text case wrong in the link:
servicentrov2.herokuapp.com/images/galerias/2014Hallel/2014-Hallel-01.jpg
should be:
servicentrov2.herokuapp.com/images/galerias/2014hallel/2014-Hallel-01.jpg
(Note: lowercase '2014hallel').
You should be able to login to your Heroku terminal via SSH. Poke around in there and see if the images are actually located where your app is looking for them as a first step.
I know it would be great if the file wouldn't link to local resource, but using phonegap/steroids framework, FILE_URI returns "file:///Users/" path which I can use for uploading to S3 or else, but Angular won't show it in the template.
Is there a possible solution? I tried adding config to my app
.config(function ($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
but it seems that doesn't have impact on the error.
I can base64 encode my images (then works), but I would like to avoid this if possible.
thanks
See the Camera example in the Steroids Kitchensink app, where the Cordova File API is used to move the picture from the tmp folder to the Steroids app's User Files folder. Since Steroids's localhost looks for assets both in the App folder and User Files folder, you can use an absolute path, e.g. src="/my_image.png". See also the App Structure on Device guide for more information on the App and User Files folder.