imgタグのパスがhtmlの値になってしまう

前提・実現したいこと

canvasを利用して着せ替えアプリを作成しています。
合成範囲の切り取りをするために利用するimgタグのsrcの値が実行中のhtmlの値になってしまい、困っています。
(最初は問題ないようですが、ページの再読み込みをするとこの現象が起きてしまいます。)

imgタグだけでなく、ほかにも変な箇所や試した方がいいこと等があれば教えていただきたいです。

発生している問題・エラーメッセージ

エラーメッセージではないですが、srcに拡張子が.htmlのファイルを指定されてしまっているため、
デバッグのElement内でsrc(unknown)と出てきます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8">
5	</head>
6	<body>
7		<!-- src(unknown) -->
8		<img   width="32" height="37" id="whiteVest" src="../image/022B.png">
9		<!-- 正常に値が取れる -->
10		<img   width="32" height="37" id="lineVest" src="../image/022A.png">
11	</body>
12</html>

JavaScript
1window.onload=function(){
2	drawImageTotal();
3}
4
5async function drawImageTotal(){
6	//最終表示用キャンバス用意
7	var ctx = TotalCanvas.getContext("2d");
8	ctx.fillStyle = 'white';
9	ctx.rect(0, 0, 370, 420);
10	ctx.fill();
11
12	if(whiteVest.src=""){
13		console.log("ベスト描画なし");
14	}else{
15		console.log("ベスト読み込みあり");
16		//htmlのパスが表示される
17		console.log("現在のsrc："+whiteVest.src);
18		CreateVest();
19		mixVest.onload = function(){
20			ctx.drawImage(mixVest,0,0);
21		}
22	}
23}
24
25/*ベスト*/
26async function CreateVest(){
27	var Vestctx = canvasVest.getContext("2d");
28	//htmlのパスが表示される
29	console.log("whiteVest.src:"+whiteVest.src);
30
31	// 柄を描画
32	var txPtn = Vestctx.createPattern(colorVest, 'repeat');
33	Vestctx.fillStyle = txPtn;
34	Vestctx.fillRect(0, 0, 320, 370);
35	Vestctx.fill();
36	Vestctx.globalCompositeOperation = "destination-in";
37	Vestctx.drawImage(whiteVest,0,0);
38	
39	Vestctx.globalCompositeOperation = "source-over";
40	Vestctx.drawImage(lineVest,0,0);
41	
42	mixVest.src = canvasVest.toDataURL();
43}

試したこと

・正常に値が取れる方のコピー＆ペースト
・022B.pngの場所確認
・ファイルが壊れていないかの確認
・デバッグのElement内で手打ち入力
・whiteVestのidを利用している箇所のコードの確認

補足情報（FW/ツールのバージョンなど）

手打ち直後は表示されますが、ページの再読み込みを行うとhtmlのパスになってしまいます。
他にも似たような処理をしている部分がありますが、そこには何も影響は出ておりません。

FromMZ1500

2021/03/11 14:37

全然内容を把握してないのですが、img.src と getAttribute('src') の差に起因する問題？とひらめきましたが(htmlというのが？ですけど)。そのあたりでググって出たpage： http://vird2002.s8.xrea.com/javascript/getAttribute.html

Level_00

2021/03/11 16:25

コメントありがとうございます。 getAttribute(’src’)でいきなり受け取りをするとパスが何も表示されない状態になって、 setAttributeでパスを入れなおしてみたら無事に値が受け取れるようになりました。場所までは特定できていませんが、どこかでsrcが空になってしまったようで、勝手にhtmlのページにアクセスしていたようです。場所が特定できるまでsetAttributeでパスを入れなおしながら進めていこうと思います。参考ページ：https://lealog.hateblo.jp/entry/2014/03/27/224121