リンク切れ画像の代替画像表示について何個か。リンク切れ画像は非表示にする。
- <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歳のおじさんがこんなものを夜な夜な作って妻が切れてます。