We Keep Coding

Vuejs - Check if image url is valid or broken

It's exactly same as Angular 2 - Check if image url is valid or broken.
how can I implement this in vuejs?

Vue.js has an #error event that you can hook into. From vuejs issue#3261. So you could do:
<template>
<img :src="avatarUrl" #error="imageLoadError" />
</template>
<script>
export default {
methods: {
imageLoadError () {
console.log('Image failed to load');
}
}
};
</script>
Edit: I've discovered this also works for <audio> tags (and I suspect other elements which define a src attribute and load an asset)!
Edit2: Silly me! It's actually an interface for adding a listener to the native onerror event that many HTML elements emit, similar to <input #blur="someHandler">, etc.

It seems that #error works fine. I personally used a method with an event in order to set an alternative image.
<img :src="imageUrl" #error="imageUrlAlt">
The method:
imageUrlAlt(event) {
event.target.src = "alt-image.jpg"
}
From Vue.js issue#5404.
Optimal solution:
<img :src="imageUrl" #error="imageUrl='alt-image.jpg'">
Thanks everyone for your valuable comments.

I use a computed property that returns a string with the placeholder URL instead of #error handler like this. This way if source is null or undefined the placeholder will be loaded.
<img :src="source || computedPropertyString" />

Jquery replaceWith keep onclick

How can I keep onclick="" value with JQuery replaceWith ? I'm making a assets system that preload every image and put it on a Javascript image() object, and using a special data attribute for img urls
<img data-assets="images/test.png" onclick="alert('test')">
turn into : (using jquery replaceWith)
<img src="assets/images/test.png">
What I want:
<img src="assets/images/test.png" onclick="alert('test')">
My code:
$("[data-assets]").each(function() {
$(this).replaceWith(Game.Preloading.Assets.Images[$(this).data('assets')]);
});
How can I fix that ? Thanks

While iterating over each [data-assets] element, you could set the corresponding onclick attribute before replacing the element:
$("[data-assets]").each(function() {
var $newImg = $(Game.Preloading.Assets.Images[$(this).data('assets')]);
$newImg.attr('onclick', $(this).attr('onclick'));
$(this).replaceWith($newImg);
});
However, it would be better to just add a src attribute on the existing element rather than replacing it:
$("[data-assets]").each(function() {
this.src = $(Game.Preloading.Assets.Images[$(this).data('assets')]).attr('src');
});
Ideally, you should be using unobtrusive JavaScript and avoiding the inline JavaScript event listeners, but both of the above snippets should work.

I think you would be better off to simple query for your attribute, then use the each method to update the SRC attribute on each matched element.
Im on my phone so a more detailed answer is difficult...
But here goes
$("[data-assets]").each(function(){ $(this).attr("src", Game.Preloading.Assets.Images[$(this).data('assets')]); });

Add hidden values to pictures

I have a bunch of pictures in a table. The pictures are also used with a lightbox function.
the simplified code is
<table><tr><td>
<img src="images/december122012.jpg" width="100px">
<img src="images/december142012.jpg" width="100px">
</td></tr></table>
what I want to do is have a function that will add the values of the various images. I read the following code to use somewhere but the alert just says undefined.
<script>
var val2 = parseInt(december122012.value);
alert (val2.value);
</script>
after I get the values to be assigned correctly I'm wanting to do something like
var year2012= december122012.value + december142012.value
alert (year2012);
thanks for the help!

Try using document.getElementById("december122012").value.
This will get the value from the "a" elements. The "img" elements do not have a value attribute.

You can not just reference an element by a string, you need to use getElementById or getElementsByName. And when you are reading the attributes, they will be strings so you will have to convert them to numbers.

jQuery change value of html input onClick

I need to change the value of the url of the onclick portion of my input tags
<input type="image" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" />
I have the needed url being dynamically stored in a variable on hover function.
$('ul.photos img').hover(function(){
var imgSrc = $(this).attr("src");
How can I take this variable and plug it into the needed area?
Thanks for any help

Something like this should work:
<input type="image" onclick="return launchEditor('image1', window.foo);" />
And the hover callback:
$('ul.photos img').hover(function(){
window.foo = $(this).attr("src");
});
Replace foo by anything you want.
But some more details on what it should do would let us help you better. Even though this should work, it's probably not the cleanest solution.

If you have that local variable in your hover handler, you either will have to make it globally available and use it in the onclick function, or you will have to change the onclick function (here: attribute) in the hover handler.

The simplest solution is to add:
<input onmouseover="this.onclick=function(){ [javascript] }"/>
with [javascript] being the code you want executed on click.

Javascript getElementById()

I'm trying to create a generic javascript function that would change attributes on events.
The way it would work is
function fooFunction(sourceElement)
{
var newName = sourceElement+'Span';
var newElement = document.getElementById(newName);
//Important line
newElement.property = "enter properties here";
}
and I'd call it with something like
<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction(this.id);"/>
<span id="fooSpan" name="fooSpan">some text here</span>
So in theory, when hovering the image, it should change whatever propery I need to change on the fooSpan object. It works in Opera, but on IE it returns a null object.
Any ideas ?
The idea would be that I would have multiple images that would automatically trigger the property change on the associated text span (typically the css style).

Are you sure you're getting the ID properly in IE? Maybe the ID being passed in is null in IE (perhaps this.id isn't working?).
Try calling it like this:
<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction('foo');"/>
and see if that helps. I don't see any reason why getElementById() would fail, so the only thing I can think of is that it's an ID issue.

May be this line won't work in IE. "newElement.property"
I don't know the exact reason.
You can use this instead of that line
newElement.setAttribute(property,"enter properties here");
In the mean time, i am trying to find out the reason behind the error.

My suggestion would to do something like this.
function fooFunction(sourceElement,property,propertyValue) {
var newElement = document.getElementById(sourceElement);
newElement.setAttribute(property,propertyValue);
};
And your HTML would look like:
<img src="foo.gif" id="foo" name="foo"
onmouseover="fooFunction('fooSpan','class','mouseover_span');"/>
<span id="fooSpan" name="fooSpan">some text here</span>

I'd STRONGLY urge you to consider using jQuery's built-in attr() method which integrates the function you want perfectly across browsers and is incredibly easy to use.
Using your example, if you wanted to change the "src" property for "foo", you could do it in a single line of code:
$("#foo").attr("src","images/whatever.png");
Similarly, if you wanted to change the html WITHIN "fooSpan", all you'd have to do is:
$("#fooSpan").html("something else");
You can even tie these to events that are going to give you a lot more flexibility than the onmouseover property:
$(document).ready(function(){
$("#foo").mouseover(function(){
$("#fooSpan").html("something else");
$("#foo").attr("src","images/whatever.png");
});
});