ループ処理でURLを正誤判定したい

Question

前提

htmlファイル内で他サイトからimgを読み込んでいます。

<img src="https://abcde.com/abcde/*/assets/img01.jpg">

ただ、システムの都合上、imgが置いてあるフォルダ名の*部分が「v1」「v2」・・・と
数字が増え、URLが変わってしまいます。

こちらでは正解のURLが分からないため、jsで画像が読み込めるよう処理できないかと検討しています。

ループ処理でv1,2・・・とURLを変えていき
"img.onload"で正しいURLかどうかを判定できるか試したのですが、上手くいきません。

参考にしたサイトはこちらです。

何か良い策はないでしょうか？

追記1

<script>
	var img = new Image();
	var img01url = img.src;
	for (var i = 1; img.onload = ('https://abcde.com/abcde/v'+'i'+'/img01.jpg'); i++){
	  imgurl=('https://abcde.com/abcde/v'+'i'+'/img01.jpg');
	  if( i > 1000 ) break;
	};
</script>

追記2

<img src="img01url">
<script>
	const img = new Image();
	let i = 1;
	const img01url = 'https://abcde.com/abcde/v'+'i'+'/img01.jpg';
	img.onerror = function() {
        i=i++
  	}
	img.onload = function() {
        img.src = img01url;
	}
</script>

追記3

<img src="img01url">
<script>
	const img = new Image();
	let i = 1;
	const img01url = 'https://abcde.com/abcde/v'+'i'+'/img01.jpg';
	img.onerror = function() {
        img01url = img.src;
        i=i++
	}
	img.onload = function() {
        document.querySelector('img').src = img.src
	}
	img.src = img01url;
</script>

Comments

[int32_t]

> ループ処理でv1,2・・・とURLを変えていき
> "img.onload"で正しいURLかどうかを判定できるか試したのですが、上手くいきません。

アプローチは間違ってないと思います。試したコードを開示してください。

Answer 1

参考サイトの内容を理解できていないのですね。

Promise は質問者さんにはまだ早いと思うので使わないことにすると、コールバックの繰り返しになるので for は使えません。

• Image オブジェクトを用意します。例: const img = new Image();
• グローバル変数 i を用意し、1で初期化します。例: let i = 1;
• このImage オブジェクトの onload イベントハンドラでは、そのオブジェクトの src プロパティがロード成功したURLなので、そのURLをページ上に表示します。
• このImage オブジェクトの onerror イベントハンドラでは、i を1つ増やして新しい画像URLを作成し、src プロパティに代入します。(この操作で、のちに新しい画像URLに対して onload から onerror のどちらかが呼ばれます)
• i==1の最初の画像URLを作成し、このImage オブジェクトの src プロパティに代入します。(この操作で、のちに onload か onerror のどちらかが呼ばれます)

Comments

[kei2]

ご回答ありがとうございます。
jsについては本当に初心者でして。

頂いた情報をもとに「追記2」を記載しました。
添削いただけると幸いです。

[int32_t]

* img.onerror に指定している関数の中で、img.src を新しいURLで更新してください。
* img.onload に指定している関数の中で img.src を更新する必要はありません。document.querySelector('img').src = img.src などで画面に表示しましょう。
* img.onload の設定の後に、img01url を img.src に代入する必要があります。

[kei2]

ご回答ありがとうございます。

「追記3」を記載しました。
ご覧いただけますか？

[int32_t]

> img01url = img.src;
> i=i++

回答に「i を1つ増やして新しい画像URLを作成し、src プロパティに代入します」と書きました。
ここで増やしたiから新しい画像URLを作成してください。
ここで img01url は使いません。

[kei2]

------------------------
img.onerror = function() {
img.src = 'https://abcde.com/abcde/v'+'i++'+'/img01.jpg';
}
------------------------
このような記述でしょうか…？

[int32_t]

動かしてみると期待通りのURLになってないとわかると思いますよ。console.log(img.src); などをコードに入れておくと、ブラウザの開発者ツールのコンソールで値を確認することができます。

i++;
img.src = 'https://abcde.com/abcde/v' + i + '/img01.jpg';

です。

よく見たら img01url の初期化も間違ってますね。

[kei2]

ありがとうございます！

このサイト、同じ状態の画像が複数ありまして
<img src="img01url">
<img src="img02url">
・・・
という風に読ませたいのですが、初期化の方法も異なりますか？

[int32_t]

複数の <img> が別々の画像URLを持つべきなら、当然画像URLの生成方法が異なるはずですね。

複数 <img> のケースは元の質問文になかった課題なので、もしわからないことがあれば新しい質問にしてください。

[kei2]

回答ありがとうございます。
別件で質問を立てるようにいたします。