I have a problem in ionic2 , my image doesn't show up in my android phone
its run normally in localhost...
{{item.name}} = A+
And my image =/assets/image/A+.png
<ion-avatar item-left>
<img src="../assets/image/{{item.name}}.png">
</ion-avatar>
I have used Ionic 2 a lot for iOS but not Android. For my apps I would set the src to be:
<img src="assets/image/{{item.name}}.png">
Rather than
<img src="../assets/image/{{item.name}}.png">
Take a look at this forum post
Seems like a device is accessing assets through /android_assets/www/<your path relative to index.html>
You need to add [] to your src attribute otherwise your img tag is being read in the html at this exactly.
<img src="assets/image/{{item.name}}.png">
and obviously your file name is not {{item.name}}.png . It should be
<img [src]="assets/image/{{item.name}}.png">
to allow dynamic content.
I also think it is ../assets/image as your build folder sits on the same level as your assets folder
I put same image under these folders and it worked for me:
1) www/assets/img/
2) src/assests/img/
then in HTML code:
<img src="assets/img/image.png">
Related
I want to use image cache in my ionic app, I found ionic-cache-src in google, but after I try use that, that's not working, just show blank rectangle.
here is my code :
<img cache-src={{values.service_parkingsite_imagefilepath}} alt="" style="height:80px; width:100px;">
note : values.service_parkingsite_imagefilepath is https url.
I have also follow all instalation step in https://libraries.io/bower/ionic-cache-src, anybody can help ?
You may replace image with div by setting src-is to background.
I'm new to Phonegap/Cordova and building an app using MaterializeCSS and JQuery on Android OS 5.1. I have a problem that no images in the IMG tag seem to be loading, but the file paths seem to be correct.
I have my app scripted so that images are downloaded from my server to
"file:///storage/emulated/0/Android/data//files/images/".
I have a static index page with a content DIV, modified using jquery:
$("#rBody").html('<div class="row"><div class="col s12">'+jxml+"</div></div>");
Therefore, content is dynamically loaded. the IMG tag src path property is modified as per platform:
jxml=jxml.replace("images", app.getStorageLocation()+"files/images");
However, the image placeholders just have a blank square instead as if image is not found.
Is there any reason for this to occur? Is there a permissions property somewhere I need to enable?
Thank you for any advice!
You will need both file permissions and the File API plugin for Cordova.
With these you should be able to read the image in and add it to the tags.
I'm trying to load an image from Angular into an img tag. The image loads find when I type the full path like 'ImageMap.jpg' directly into the src field in html. But when I set the value in Angular it doesnt work, it can't find the image. This happens on all devices I tested on, I included a screenshot of the WP emulator at the bottom of the post.
I built the apps using Cordova.
This works
<img ng-src="ImageMap.jpg" class="stretch" ng-show="true">
This does not
<img ng-src="{{ gifSource }}" class="stretch" ng-show="true">
I set the value in the first line of the controller
angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.gifSource = "ImageMap.jpg";
This works fine in Chrome, but does not in for example the WP emulator/device.
I added this line in my HTML to check the path gets set, which it does. The file is in the root folder along with index.html
<b> Path: {{ gifSource }}</b>
I had a similar issue but I fixed that after defined an absolute path of application as value and put that value into "ng-src" attribute to reach needed image.
For example:
var myApp = angular.module('myApp', ['ngRoute', 'myCtrl']);
myApp.value("basePath", "http://localhost/my/path/images/");
and then in controller:
myApp.controller('myCtrl', ['$scope', 'ngRoute', 'basePath', function($scope, basePath){
// Use basePath value to get url and concatenate it with image
$scope.basePath = basePath + 'myimage.png';
}]);
In this way you can pass your value within whole application, you just need to change image name in order to use different images.
I have a html file that contain a lot of text and basic html tags. The file is inside res/raw folder.
However, when i tried to show this html from my webview, </br> is not working, while <b></b> is fine.My min SDK is 8 and target SDK is 15.
This is the screen shoot :
This is the html file :
<!DOCTYPE HTML>
<article align="center">
Printf(“Hello World ^_^”);</br></br>
<b>This section will explain about the objective of this apps.</b></br>
This apps is designed for those who want to learn Computer Science (programming), with no experience necessary (so you don’t have to worry about your age, background, education, etc. EVERYONE can learn programming!).</br>
This apps will teach you about the basics of the programming using C languange.</br>
</article>
This is webview code :
webChapter.loadUrl("file:///android_res/raw/hello_world.html");
I tried this one, but no luck, the file even cant be read :
webChapter.loadDataWithBaseURL("file:///android_res/raw/", "hello_world.html", "text/html", "UT-8", "");
Thanks :D
Use <br> instead of </br>
http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element
In my little app i have a webview, i only have one html file in the assets folder. I'm trying to use a named anchor to make a Jump Link but it doesn't work. It only says Web page not available I don't know where i'm wrong. Is it trying to load a html file with the name tag i provided?
WebView mWebView = (WebView) findViewById(R.id.mywebview);
mWebView.loadUrl("file:///android_asset/topics.html");
EDIT:
here's my html
<html>
<body>
<a href=”#tip”>Go somewhere</a>
//a lot of <br/>...
Somewhere
<a name=”tip”></a>
</body>
</html>
And yes the topics.html is under assets/
Where does your program fail - with the loading or when you click the anchor? It sounds like the problem is with your HTML file, so you should probably show the code from that instead. :) Also, the full LogCat output is handy too. The more info the merrier.
I recently implemented a WebView, the HTML code is extremely straight-forward (since I know close to no HTML and just wanted an easy way to display documentation). A simple anchor is just this for example:
Navigating the application
...
<a name="q1"></a>
<p><b>Navigating the application</b></p>
<p>...sliding motion (to the left or to the right) with your finger...</p>
If your program is failing at the actual loading part, then ensure that you have placed the topics.html file correctly in the /assets/ folder in your project folder. It has to be at the very root of your project folder - ie. workspace\<projectname>\assets\topics.html
Your code for loading the webpage looks fine.