We Keep Coding

Is there a way to hide an "Image not found" error icon without "this.style.display = 'none'"

I'm trying to have multiple image boxes in a span, with no pre-determined src. This is for a basic game of blackjack as a task I have set myself to do in JavaScript.
Currently, here is my HTML code for the span of image boxes.
This site is not being hosted, I'm running it via my browser; no JQuery
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''></img>
<img class='imagebox' id='imagebox2' src=''></img>
<img class='imagebox' id='imagebox3' src=''></img>
<img class='imagebox' id='imagebox4' src=''></img>
</span>
In my JavaScript file, after a card has been selected, I use interpolation to get an image. It will be dealt by changing image.src as shown:
function deal(box) {
let card = randomcard()
const image = document.getElementById(`imagebox${box}`)
if (image.src !== card) {
image.src = `cardpng/${card}`
}else {
redeal()
}
}
My issue is that, since no src has been defined for each image box, until it has been assigned a src, it will have an "image not found" icon, which for aesthetic purposes I'd like to remove.
I tried:
<img class='imagebox' id='imagebox1' onerror='this.style.display = "none"' src=''></img>
However, in doing so, this.style.display remains as "none", even after a src is defined and there should be no error.
I understand I could just write a function once a card has been dealt to change it back, however I'm looking for something prettier which will be easier and less communication between HTML and JS.
Thanks in advance for replies.

Use CSS
img[src=""] {
display: none;
}
Like this -
setTimeout(() => document.getElementById('imagebox1').src = "image.jpg", 2000)
img[src=""] {
display: none;
}
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''/>
<img class='imagebox' id='imagebox2' src=''/>
<img class='imagebox' id='imagebox3' src=''/>
<img class='imagebox' id='imagebox4' src=''/>
</span>
However - are you sure you're seeing an image not found icon?? I don't see any here
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''/>
<img class='imagebox' id='imagebox2' src=''/>
<img class='imagebox' id='imagebox3' src=''/>
<img class='imagebox' id='imagebox4' src=''/>
</span>
note: img does not have a closing tag - it's either <img ...../> or <img .....> with no </img>

A solution that would work even for actually broken images, and not just for the ones you haven't set their src yet, is to set the alt attribute to the empty string:
<section>
<p>With <code>alt=""</code></p>
<img alt="">
<img alt="" src="">
<img alt="" src="https://example.com/broken-image.jpg">
<img alt="" src="https://www.fillmurray.com/50/50">
</section>
<section>
<p>Without</p>
<img>
<img src="">
<img src="https://example.com/broken-image.jpg">
<img src="https://www.fillmurray.com/50/50">
</section>
However beware that with this solution your images are converted to empty text nodes for the renderer, which don't take any space, but which make the neighbor white spaces get rendered. So for instance in the above example, the new lines between each <img> tags are visible as a single space text node in the rendered page, just like they are when the images are rendered.
However this is an issue only when the images are presented inline like here.

How can I integrate srcset in slideshow?

My website contains a slideshow. I want to change the image, depending on the viewport size. This has been solved with following code:
<picture>
<source media="(min-width:650px)" srcset="images/slider/4.gif" >
<source media="(min-width:200px)" srcset="images/slider/4_m.gif" >
<img src="images/slider/4.gif" alt="" style="width:auto;" >
</picture>
The image works, dependently on the viewport size. My problem - I want to integrate in this code here:
<div class="slider-area">
<div class="bend niceties preview-2">
<div id="ensign-nivoslider" class="slides">
'Following line should be replaced with code above...
<img src="images/slider/4.jpg" alt="" title="#slider-direction-1" />
<img src="images/slider/5.jpg" alt="" title="#slider-direction-2" />
<img src="images/slider/6.jpg" alt="" title="#slider-direction-3" />
</div>
4th line should be replace by code above, but it doesn't work out. Can someone help?
Thanks in advance!!

How to fix lag between images in Fotorama?

So I have a series of images in my image slider from Fotorama. My problem is that
there is a very slight delay when transitioning between different slides for the first time, I imagine because my images are all quite large. Is there any way to easily fix this through javascript or html/css? I read their documentation regarding 'lazy loading' but I'm not sure if that is really applicable for what I want to do. Any advice would be appreciated.
<div class="fotorama"
data-margin="0"
data-transition="slide"
transition-duration="0ms"
data-keyboard="true"
data-swipe="true"
data-click="false"
data-width="100%"
data-height="95%"
data-ratio="3/2">
<img src="images/bgardenflower2.jpg">
<img src="images/yellowflower.jpg">
<img src="images/lushflower.jpg">
<img src="images/flowerbee.jpg">
<img src="images/fly.jpg">
<img src="images/bgardenflower1.jpg">
<img src="images/toad.jpg">
<img src="images/algae.jpg">
<img src="images/lushscape1.jpg">
<img src="images/westvirginia1.jpg">
<img src="images/westvirginia2.jpg">
<img src="images/duskbridge.jpg">
<img src="images/lighthouse.jpg">
</div>

Using photoshop you can save images in webformat, so the images size will be reduced and load quickly...

How to create anchors or append items in aspx pages?

I have some code I have written for a image gallery on my page, "gallery.aspx". The scenario is that I have an external aspx page with different links. When I click on one of those link I want to redirect to this image gallery but to a specific image.
For e.g I have a page called "home.aspx" with a link called "img2". When I click on "img2" I want to open up this image gallery(which sits on a page called "gallery.aspx"), but I want tab 2 of the gallery to be opened so 2nd image.
I can get it to work on my html pages using (url/gallery.html?img=img2) but I would really like to be able to do it on my sharepoint aspx page.
Thank you in advance.
My HTML code is as follows:
<div class="gallery" align="center">
<div class="thumbnails">
<img name="ift" onclick="preview.src=img6.src" id="img6" src="IFT.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img1.src" id="img1" src="Clear.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img2.src" id="img2" src="Agile.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img3.src" id="img3" src="AllForOne.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img4.src" id="img4" src="Decide.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img5.src" id="img5" src="Possibilities.png" alt="Image Not Loaded"/>
</div>
<br/>
<div class="preview" align="center">
<img id="preview" src="IFT.png" alt="No Image Loaded"/>
</div>

Aspx also support HTML. You could just put these code to your ASPX page. No changes would be required.

Replace Image SRC On CLick

I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.

Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once

document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.

$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.