I have a template for picture gallery which is populated with an ajax callback.
The problem is that before the template is populated, since it is looking for an image, I get a console error that the image is not found.
<img src="{{image.url}}" alt="{{image.alt}}">
How can I render this template only once there the data is available?
You are using src which would be intially be null and hence the browser makes a request for it. ng-src fixes it
ng-src='image.url'
Related
For some reason, content is not being displayed on the website if viewed from the microsoft edge browser. The background is loaded, which is loaded through HTML, but the parts loaded with Vue do not get displayed and i dont understand why.
I have no idea where to start to debug this.
<div class="nk-main">
<router-view :key="$route.fullPath"></router-view>
</div>
In the console, i get these errors on Microsoft Edge:
https://imgur.com/a/y7V3NG7
$store is the VueX variable. And the this error I dont understand.
Does anyone have any idea how I can fix this or how I can further debug the issue?
I think #birdspider answered your question. In your Vue.js templates you referencing to Vuex store like this this.$store.state.blabla instead of $store.state.blabla. This happen because this keyword in template is undefined. When you access your variables in template you have to dont use like {{this.variable}}, just {{variable}}, declared in data() setction.
If the url() function in CSS is called without any parameters, does it send a request to the page's URL?
I am building an angular app and I have the following, rather naive code in my partial:
<div style="background-image: url({{scope.image_url}});">
{{scope.message_text}}
</div>
When the app loaded, I noticed that there was a call being made to my page's URL causing my server-side handlers to fire some analytics events incorrectly.
From my observation, I saw this behavior on Chrome & Firefox. However, I am not able to locate any documentation which states the behavior of the url() function when no argument is passed.
Please let me know if this is the correct behavior or if I am missing something.
As described by W3, the url() function expects a string as a parameter. Here in your case $scope.image_url was resolved to an empty string, which is a legal Relative URL, so browser will try to resolve this to a full URL, which in your case is base_url + ''.
You can verify that by change $scope.image_url = '1', then you can see one request to http://yourdomain/1.
To prevent this I would suggest you to create a fallback directive to show a default image if you don't have a image for this record, see this stackoverflow answer for more details
I think he's resolving your empty bind as url(undefined).. So He'll try to resolve the URL http://<domain>/path/to/your/page/undefined .
Do you initialize scope.image_url on page load?
To prevent this, I suggest to bind the entire style attribute, and not only the url() ... If there is no "empty" url(), I think it won't load a random request... Or if the background is only static, use CSS classes instead of style attribute...
I am using angular-translate and its extension angular-translate-loader-static-files to i18 my angular app. Both the required JS files are included in the index.html.
Everything works as expected except that the screen shows the raw message code for a second before we can see the translated messages. I think that happens because the enUS.json (the message translation json) is fetched using an ajax call and until its completed, raw message codes get displayed.
Is there any way of fixing this?
Your issue is not specific to angular-translate.
Either use
https://docs.angularjs.org/api/ng/directive/ngCloak
or
https://docs.angularjs.org/api/ng/directive/ngBind
I have an image servlet which basically loads an image template on a url.
i am also able to access it through img tag.
Based on my response after form submission, i need to display this image
Following is an excerpt from my ajax code
document.getElementById("outmessage").innerHTML = "<h2><img src=\"${pageContext.request.contextPath}/sort-code-image\"/> </h2>";
I basically need to modify/draw on this image template before i display it on my jsp page.
I am a bit confused as to how to proceed with this problem.
Do i modify the image on servlet everytime when i do some of my business logic
or is there a better way to do this?
Apologies for some terminologies as i am a bit new to servlet and ajax.
Any inputs is highly appreciated.
We can use the following to write a base64 encoded data to img src attribute in java script and can modify the image.
var src3="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1hByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADABAAIRAxEAPwDi677TfhJr99py3UstraPJGHjgmLbwcjhwB8vy5Pc9AQOccDXs9h8ZdKNjD/aNheLebf3ot0Vo8+qksDg9cHp0yeteFho0ZN+1Z+r5zWzClCH1GN9devp9+p5TreiX3h7VJNP1CLZMnIYcrIvZlPcH/EBBFZ1dF408T/8JX4ga+SDyYI4xDCp+8UBJBbtklj06cDnGTztYVFFSajselhJVpUISrq07arzCiiipOgKKKKAP//Z";
document.getElementById("outmessage").innerHTML = "<h2> Image \<img src\= "+src3+" /></h2>";
I figured out the same when i faced the problem mentioned in following link
setting variable value in src attribute of image tag to a base64 encoded image in javascript/ajax
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.