Ok so I'm trying to load images from external resources.
My web api returns a json to my Nativescript app.
In my Nativescript code, I parse a json retrieved from my api, to construct the view manually. Everything works fine but the image part.
For the image, I proceed this way:
var image = new imageModule.Image()
image.src = page.bindingContext.news.getItem(args.index).image_original_link
then I attach it to my layout, through addChild.
I also tried to do it through an XML template, and I have the same problem:
<Image src="https://www.google.com/images/errors/logo_sm_2.png" stretch="none" />
this --^ is never rendered.
If I replace the url by an image located in my local directory:
image.src = "~/images/foo.png"
Then it works perfectly.
I tried to replace the dynamic source url fetched from my array by a static link to an image and it's not getting accessed (I checked the log on the webserver serving said image).
What am I doing wrong?
edit:
I'm testing on iOS
I already have the following in my plist:
NSAppTransportSecurity
NSAllowsArbitraryLoads
Actually on iOS you need to set the height/width of the image control; try doing something like:
<Image src="https://www.google.com/images/errors/logo_sm_2.png" stretch="none" width="100" height="100"/>
In addition if you are using v2.30 of NativeScript there is a bug if you set any parents "color" it can propagate down to the image and cause the image to not show. To fix either remove the "color" from all parents or upgrade to the 2.4 (when released or #next until released)
Related
I have a page that is used for uploading a file to be used as a logo inside an iframe, which is located on the same page. After uploading (via POST to /api/defaults/logo), the iframe should update with the new logo. This works in Chrome and Safari, but not in FF.
The code in question:
this.getMessagePreviewArea().html(renderedHtml);
getMessagePreviewArea: function() {
// SVG render bug fix: begin
// http://stackoverflow.com/questions/10177190/svg-dynamically-added-to-iframe-does-not-render-correctly
this.$('iframe')[0].contentDocument.open();
this.$('iframe')[0].contentDocument.close();
// SVG render bug fix: end
return $(this.$('iframe')[0].contentWindow.document.body);
}
renderedHtml is pretty basic HTML, generated by Mustache, but it contains:
<img class='logo-img' src='/api/defaults/logo'>
That api endpoint is what's not being called. If I refresh the page, it hits the server and grabs the new image fine, but it should be able to do that as soon as the HTML is inserted into the iframe, right?
Sorry if the syntax seems off, it's written with Backbone.js.
cache? Probably you should try to add timestamp to src like: '/api/defaults/logo?42346546745'
I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help
When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.
I'm changing the marker image upon mouseover of an element on the page, using the setIcon() method. It works fine when the url is something like this:
marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
but when I try to get it to find an image in my local application directory, it can't find the image (the original marker image disappears but the new one doesn't appear):
marker.setIcon('images/myMarker.png');
I've tried every possible url (app/assets/images/myMarker.png, /images/myMarker.png, assets/images/myMarker.png, etc), and also placed the image in many different locations, it still doesn't work.
How do I get the javascript to find my png??
Assuming that it is an asset pipeline error i.e marker_green.png becomes something like marker_green-336339d13ed7edf253018e0f7f70bee2.png in production. Here are a couple of solutions:
Place the marker_green.png file in a public directory e.g. public/mapfiles/marker_green.png
or
Set a data attribute for the image path on a html element such as the div which loads the map and get is using JS/jQuery. i.e:
HTML:
<div id="map" data-marker-url="<%= asset_url('marker_green.png') %>"></div>
JS:
var markerIcon = $("#map").data('marker-url');
marker.setIcon(markerIcon);
It sounds like this is an issue with the rails asset pipeline. Here are a few options you can try:
1) Forget about the asset pipeline (not ideal), and move your marker to public/images. marker.setIcon('images/myMarker.png'); should then work.
2) Add the .erb extension to your file, and use asset_url to get the proper asset path when referring to the image: marker.setIcon("<%= asset_url('marker_green.png') %>");
It would be good to read through the asset pipeline documentation to figure out what will work with your configuration.
I'm trying to do some performance improvement on a web page that I'm building, and one of the things that I'm doing is, using javascript, downloading an image by creating an Image() object, and settings its src attribute to a given URL.
I'm then handling the onload event of that object, and in the handler, I'm using the objects src attribute to set the src attribute of two <img> elements on the page. What I was hoping that would do was only download the image one time, and then use that downloaded image as the src of the two image elements on the page, but that doesn't seem to be what's happening.
From what I can tell by viewing Network information using Firebug and Google Chrome dev tools, setting the src attribute of the two image elements on the page appears to result in actually downloading the image twice, once for each set.
Its the same image, and its rather large...so the download is time-consuming. Is there a way that I can force the image to only be downloaded once? Here's my code:
var image = new Image()
image.onload = function () {
$('#img1').attr('src', image.src);
$('#img2').attr('src', image.src);
image = null;
}
image.src = 'my/image/url';
UPDATE: This is what is causing me to believe that the image is being downloaded twice. Again...I could be wrong, maybe this is misleading, but if Chrome dev tools is reporting two different "resources" on the Network tab, each with the same path, the same file size, but different timings, wouldn't that indicate that its actually being downloaded twice? Maybe my problem is with the dev tools I'm using, I dunno...
src is nothing but the url pointing to the image on the server. If you set the src of the image it will refresh the image.
Browsers do cache images if the url do not change. Even if you see a image request in the console but it is still coming from the cache unless you have disabled caching.
Modern browsers support Local storage where you can cache any static resource you want. Take a look at this jQuery Image Cache plugin it might be helpful to you.
http://dumitruglavan.com/jquery-image-cache-plugin-cache-images-in-browsers-local-storage/
You can also try setting the background image to a class and add that class to elements you need.
When you are assigning the second src, the browser will check the server if the image is changed (might be using some file hash mechanism), if both the images in the server and in the cache is same, browser will load the image from the cache, still you will see a request to servers in Firebug console.