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.
Related
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">
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 am trying to display image,docs from base64-string for Android and IOS. I am using inapp browser plugin to display image and doc files in app.
For IOS i am able to display images using below code.But facing issue with Android and Blackberry.
window.open(urlData, "_blank", "location=no,enableviewportscale=yes");
I am passing urlData parameter as base-64 string. Android and Blackberry nothing is displaying. After searching i found this post.
Alternative: just store that whole data string in your database. Then when you render your tag you can simply dump it into the src
attribute:>" />
After inserting above code i am able to display image but how to close the image ? How to open image in popup ? So user can close the image.
Thanks
First, window.open probably isn't working because all URLs have to be granted access specifically, for security. You can try to bypass it with this in your config.xml -- I don't know if it will work for data: URLs.
<access origin="*" subdomains="true"/>
<preference name="WebSecurity" value="disable"/>
If this doesn't work, how to show an image in a pop-up comes down to the design of your app. If you're using something like Ionic Framework, Bootstrap, jQueryUI, or Ratchet, they each have components for Modals or Dialogs you could potentially use. If you're not using a UI framework, you'll have to design your own pop-up div to contain the image tag, that is hidden again when you tap or dismiss it. Finding information on Google about how to do this is not very hard.
Good luck!
I am able to solve this issue in BlackBerry using below steps.
1)Remove webWorks.js from index.html
2)Replace below script inside index.html
<script src="worklight/cordova.js"></script> to <script src="../../cordova.js"></script>
3) Add below code inside js file. Need to pass urlData as Base64 string and filename.
requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function (fs) {
var ft = new FileTransfer(),
localPath = fs.root.toURL() + fileName;
ft.download(urlData, localPath, function (entry) {
entry.file(function (file) { console.log(file.size); });
window.open(localPath, "_blank", "location=yes,closebuttoncaption=Close,enableViewportScale=yes");
}, function (e) { console.log('download error'); console.log(e); });
});
I am using XE7 Rad Studio to build "apps" for Android and IPhone. Focusing on Android for the moment.
According to the requirements, I need to load the HTML inside the application as a resource string.
WebBrowser1.LoadFromStrings(ResourceStrings.HTMLString,'');
//Loads the resource-string successfully.
However in this resource-string I need to load images, and I cant figure out how to do it. I can see in deployment that I have the images loaded into the project {Bitmap_1, Bitmap_2,Bitmap_3}.
How do I complete this line:
resource-string:
...'<img id="img2" class="thumbnail" src="/images/im2.bmp" alt="/images/im2.bmp"/>'...
Many thanks.
If you read the documentation for LoadFromStrings(), it says:
Displays HTML string content within the TWebBrowser component.
This method uses the following parameters:
Content: specifies the HTML string to be displayed.
BaseUrl: specifies a path that is used to resolve relative URLs within the loaded page. To clarify, consider the following scenario: this parameter is set to www.mycompany.com/departments/, and the loaded page defines a link <a href=’Sales.html’>Sales dept</a>. In the given case, clicking this link opens http:// www.mycompany.com/departments/Sales.html.
That is the exact scenario you are running into. Your HTML contains relative links to external images, but you are not providing a BaseURL, so the WebBrowser cannot resolve the correct URLs it needs to load those images.
In the Deployment Manager, set the Remote Path of your image files to either StartUp/Documents/images/ or StartUp/Library/Application Support/images/.
At app startup, Delphi will copy files beginning with StartUp to the appropriate folder on the device. Then you can do the following when calling LoadFromStrings():
// note sure which function to use for 'StartUp/Library/Application Support/',
// maybe TPath.GetLibraryPath()? This example is for '/StartUp/Documents/'...
WebBrowser1.LoadFromStrings(ResourceStrings.HTMLString, 'file://' + TPath.GetDocumentsPath);
That will allow "/images/im2.bmp" to resolve to something like file:///data/data/<application ID>/files/images/im2.bmp", etc.
I'm trying to inject HTML code downloaded from URL into my page.
Here the JQuery code
$('#messageScreen').live('pageshow', function() {
$('#messageContent').empty();
var url = testServerDirAdrs + 'message?message_id=' + selectedMessageId;
$.get(url,
function(data){
$('#messageContent').append(data).trigger('create');
},'html');
});
It works fine, but when downloaded html contains images, they are not displayed.
The image tag downloaded from the URL is:
<img src="/images/logos/muni_1_small.png" />
I guess the problem is with the path.
Any idea how can I solve this problem?
Thanks, Costa.
Below you can find 2 possible solutions:
The image can be downloaded from the web so the src could be like src="http://www.example.com/example/myexampleimg.png"
The image exists locally and the img tag's src must have relative path. For example if the html file in which the img tag will be appended is in the same path as your images folder then the path will be ./images/myexampleimg.png. In case your images path is one folder before then the path will be ../images/myexampleimg.png etc
I hope this helps.