リンク切れに代替画像を表示 – きみいて。略して、君たちがいて僕が犬。

リンク切れ画像の代替画像表示について何個か。リンク切れ画像は非表示にする。



<img src="original.png" alt="title" onerror="this.style.display='none'"/>

代替画像を表示にする。



<img src="original.png" alt="title" onerror="this.src='https://your-site-url-image'"/>

スタイルシートで。これを採用した。



<style>
 <!--
img:before {
  content: " ";
  display: block;
  position: absolute;
  top: -20px;
  margin-left : 0px;
  height: calc(100% + 40px);
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
}
img {
  position: relative;
}
/* Broken link koriki */
img[alt]:after {
  display: block;
  position: absolute;
  width: 85px;
  height: 85px;
  margin-top : -56px;
  margin-left : 46px;
  background: #ebebeb url('https://') no-repeat center;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;
  text-align: center;
  content: attr(alt);
}
-->
</style>

JavaScript。



<!-- Broken link koriki -->
document.addEventListener('DOMContentLoaded', () => {
const images = [].slice.call(document.querySelectorAll('img'));
images.forEach((image) => {
image.addEventListener('error',() => {
image.setAttribute('src','https://');
 });

もしリンク切れの場合は代替画像が表示されます。わざとリンク切れさせてみますね。

43歳のおじさんがこんなものを夜な夜な作って妻が切れてます。