Develop Reference

I can't pass a URL built by concatenating strings and object property value into a Vue.js directive of a package and I have no idea why

I have a page where I render a lot of images and because of that I was advised to look up and implement image lazy loading. After googling, I decided to use the vue-lazyload package - https://github.com/hilongjw/vue-lazyload, however, I hit a brick wall rather quickly. Right now I render my images like this:
<div v-for='card in filteredByAll'>
<img :src='"../assets/cards/" + card.cardCode + ".webp"'>
</div>
Which works fine and dandy. As you can see, I just build my URL inside the src. Now if I want to use the vue-lazyload package, I have to remove the src and add a Vue.js directive v-lazy and put the URL inside of it like this:
<div v-for='card in filteredByAll'>
<img v-lazy="">
</div>
The problem is that whenever I try this:
<div v-for='card in filteredByAll'>
<img v-lazy='"../assets/cards/" + card.cardCode + ".webp"'>
</div>
The image doesn't render. Honestly I'm not even sure if I can build the URL inside the v-lazy but what is my other option? I tried using random image URLs I found on google and it worked fine so the package is working fine, so I think I'm likely making a mistake somewhere.

Angular Image src not updating although variable is populated

I have the following code:
app.component.html:
<button (click)="updateImage('image1.png')"></button>
<img src="{{selectedImage}}" alt="" />
app.component.ts:
selectedImage;
updateImage(image) {
this.selectedImage = image;
}
My question is...If image url has been passed, why isn't the image src updating?

use [src] instead of src
<img [src]="selectedImage" alt="" />

Also, ensure that your pathing is correct. The code looks good, but the app may not find your image. There would be an error 404 in your browser console if that were the case.
Try placing the image in your assets folder and linking it with updateImage('/assets/image1.png')

How do I upload image/s and store in Local Storage (angularjs)

What I want to do…
User clicks ‘upload image’ button
User selects an image from local machine
Image is uploaded to the page
Image is stored in local storage
User can navigate away from view and then return to the view and see the previously uploaded images.
Repeat steps 1 - 5
How I think I can achieve it…
ng-flow plugin to manage user uploads
convert image to base64 and store image as string in local storage
get base64 string and convert it to image for preview.
Why I want to do this…
For phase 1 I need to show my tutor how my application will work, so I just need to imitate the images stored in a database, this is why I'm using local storage - I understand this is bad practice but I also need to show use of local storage.
My tutor encouraged me to use stack overflow and knows I posted this.
Code so far…
My view
<!-- Upload multiple images with the extensions of png,jpg, jpeg & gif -->
<div flow-init="{target: '/upload', singleFile: false}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">
<div class="jumbotron">
<div class="container">
<div><span class="btn btn-default btn-selectimage" flow-btn flow-attrs="{accept:'image/*'}" onchange="previewFile()">Select image</span></div>
<br><p>Only PNG,GIF,JPG files allowed.</p>
</div>
</div>
<div>
<div class="thumbnail" ng-hide="$flow.files.length">
<img src="images/no-images-placeholder.jpg" />
</div>
<div class="thumbnail col-md-3" ng-show="$flow.files.length" ng-repeat="image in $flow.files">
<img id="image-handle" class="preview-blob" flow-img="image" /><br>
<img class="preview" ng-src="{{imageStrings[$index]}}"/>
<div class="image_option_controls">
<span class="btn glyphicon glyphicon-trash" ng-show="$flow.files.length" ng-click="image.cancel()"></span>
<span class="btn glyphicon glyphicon-heart pull-right" ng-click="image.like()"></span>
</div>
</div>
</div>
</div>
My Controller - so far...
angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
var myImage = [];
$localStorage.myImage = document.getElementById('image-handle');
console.log($localStorage.myImage);
});
I can select images and preview them on the page, when I inspect the page the image src has been converted to base 64. From this point on I'm stuck on how to get the base 64 string and store it.
Sorry for the rookie post, any tips or pointers would be greatly appreciated.
Thanks in advance!

I recently read an article for the very same purpose and one way to do this for an image, is to load into a canvas element. Then, with a canvas, you can read out the current visual representation in a canvas as a Data URL. Following is the code snippet
// Get a reference to the image element
var elephant = document.getElementById("elephant");
// Take action when the image has loaded
elephant.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;
// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");
// Save image into localStorage
try {
localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
console.log("Storage failed: " + e);
}
}, false);
DataURL is a base64 string as localstorage cannot store images directly and It is not that common to store images in localstorage. I maybe wrong though. However, here is a link that is gonna link help you further https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Making an image change from one to the next in 2 seperate divs

I am trying to create two divs with a rotating image in on my webpage, these change to another image after a certain amount of seconds and there are 3 images to display. At the moment I am just trying to get the mechanics of this working using the code below, but although its simple I can not get it working. the code is the same as what I have used before however this time it does not want to work. I did it last, years agao, and I have completely forgotten how and research has not helped.
My code is below. In case this problem is site specific I have also included a livelink HERE which I shall remove once the question is answered. THE TWO DIVS ARE THE RED AND YELLOW BOXES.
JAVASCRIPT
var rotators = [
{ id: 'advert1', images: ['http://www.w3schools.com/html/html5.gif', 'http://www.w3schools.com/html/pic_mountain.jpg', 'http://www.w3schools.com/html/pic_graph.png'], selectedIndex: 0 },
{ id: 'advert2', images: ['http://www.w3schools.com/css/klematis_big.jpg', 'http://www.w3schools.com/css/klematis2_big.jpg', 'http://www.w3schools.com/css/klematis3_big.jpg'], selectedIndex: 0 }
];
var updateImages = function() {
for (var i=0; i < rotators.length; i++) {
var rotator = rotators[i];
rotator.selectedIndex++;
if (rotator.selectedIndex >= rotator.images.length) {
rotator.selectedIndex = 0;
}
document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex];
}
};
var timer = setInterval(updateImages, 1000);
</script>
HTML
<div id="main">
<div id="advert1"></div>
<div id="advert2"></div>
</div>

You are trying to set the div src. you need to have an image (img) element inside each div and then to set the image src.
<div id="main">
<div>
<img id="advert1" alt="" src.../>
</div>
<div>
<img id="advert2" alt="" src.../>
</div>
</div>
Another option will be to set the div background image using the style property or class property (both using CSS sets with JavaScript).

The javascript is executed where you write, if you write before element then the element does not exist.
You can attach code to onReady event of document or puts code after element.

Looking at your code in Google Chrome, I see the following error in the console :
Uncaught ReferenceError: $ is not defined | new.html:204
It seems like you forgot to include the jQuery in your html page.
You can get it from a CDN on the following page: http://code.jquery.com/
Another problem is that you're trying to update an img but your DOM element is a div.
You should replace the following code:
<div id="main">
<div id="advert1"></div>
<div id="advert2"></div>
</div>
With:
<div id="main">
<img src="" id="advert1" />
<img src="" id="advert2" />
</div>

Preloading content with images with jQuery

I am using .load() in jQuery to load in html content, but in this content there are 3/4 images embedded. The success event only fires on .load() when all the html is loaded in and not actually the images, does anyone know a way of preloading the full content of a page?
$('#ajax_loader').hide().load('page.html',function(){
$(this).fadeUp(1000);
});
This is my simple code (rest of it is in the full app), loading in the following code (ie. page.html)
<div>
<div id="slideshow">
<img src="images/img1.jpg" />
<img src="images/img2.jpg" />
<img src="images/img3.jpg" />
</div>
<p>This is some sample content</p>
</div>

I suggest that you don't use a fadeIn animation after the images are loaded because of performance degradation it brings. It is usually a good idea to fadeIn the content then start loading the images to ensure that the animation is smooth for as many users as possible.
Having said that, of course you can accomplish your original goal if you want to stick with it:
Use a 1x1 blank image as the image src attribute and store the real url in the title.
<div>
<div id="slideshow">
<img src="blank.gif" title="images/img1.jpg" />
<img src="blank.gif" title="images/img2.jpg" />
<img src="blank.gif" title="images/img3.jpg" />
</div>
<p>This is some sample content</p>
</div>
And your code becomes:
$('#ajax_loader').hide().load('page.html', function(){
var c = 0;
var images = $("#slideshow img");
images.load(function(){
if (++c == images.length) {
$('#ajax_loader').fadeIn(1000);
}
});
images.each(function(){
this.src = this.title;
});
});

The images are loaded with separate HTML requests, and obviously the browser can't even start loading them until the HTML in the response has been parsed.
If you know the URLs of the images before you load the content, then you can preload them by creating "Image" elements and waiting for them to load (that is, by handling their "load" events individually).
var imgUrls = [ "images/img1.jpg", "images/img2.jpg", "images/img3.jpg" ];
var c = 0;
for (var i = 0; i < imgUrls.length; ++i) {
var img = new Image();
img.onload = function() {
c += 1;
if (c == imgUrls.length) {
// at this point all images are loaded
// ...
}
};
img.src = imgUrls[i];
}
edit — #galambalazs pointed out that the closure around the handler was (in this case) unnecessary.

Check out this similar situation
It seems that the main fix to your problem would be the correct use of the .ready and the .load operator. If used properly, you can wait until all elements and media items are loaded into the browser before a response is passed to its handler. I don't want to plagerize too much :) and its a really great answer.