パスが通らない時、別のパスで画像を表示したいです。

パスが通らない時、別のパスで画像を表示したいです。それだけです。一応コードを載せます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>利用規約</title>
7    <link rel="stylesheet" href="terms_of_service.css">
8    <script src="terms_of_service.js"></script>
9</head>
10
11<body onTouchStart = "">
12    <header>
13        <div id="pictPosition"></div>
14        <script>makeheader()</script>
15    </header>
16</body>
17</html>

Javascript
1
2function makeheader() {
3    //<div id="pictPosition">の位置の入手
4    const pictPosition = document.getElementById("pictPosition");
5
6    //<img>の作成
7    var imageElement = document.createElement("img");
8    imageElement.src = "header.png";                //画像の登録（スマホ用）
9    //imageElement.src = "../header.png";             //画像の登録（PC用）
10    imageElement.alt = "headerPictuer";
11    //imageElement.onerror = "this.src=header.png";
12    imageElement.width = 200;                   //サイズ調整
13    
14    //<a>の作成
15    var aTag = document.createElement("a");
16    //aTag.href = "../index.html";                //パスの設定（PC用）
17    aTag.href = "index.html";                   //パスの設定（スマホ用）
18    //<a><img></a>にするために登録
19    aTag.appendChild(imageElement);
20    
21    /**
22     *  <div>
23     *      <a>
24     *          <img>
25     *      </a>
26     *  </div>
27     * にするために登録
28     * **/
29    pictPosition.appendChild(aTag);
30}
31
32

otn

2021/03/20 05:49

> パスが通らない時、はどういう状況のことですか？

GAKU_SAY

2021/03/20 14:40

swiftのWKwebkitを使用して表示する際に同じ階層に画像ファイルがあるとされているのですが、PCの場合だと別の階層になるのでパスが通らないです。「パスが通らない」は目的のファイルが（見つから）ないと思ってください。

dameo

2021/03/21 15:13

errorイベントというのが使えるかもしれません。正確に「ファイルが見つからない」エラーかどうかは分かりませんけど。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script> window.addEventListener("DOMContentLoaded", function () { document.querySelector('#target_image').addEventListener('error', function (ev) { this.src = "load_error.png"; }, { once: true }); }); </script> </head> <body> <img id="target_image" src="hoge.png"> </body> </html>