JavaScriptとcssで読み込む画像の「相対パス」「絶対パス」

2022.07.05

JavaScriptで画像を読み込むパスの話、まずはhtmlからjsを読み込む

こういう階層構造のケース

sample.html

jsファイルの読み込みは絶対パスでも相対パスでも構わない。
Wordpressのような全ての記事（全ての階層にあるhtmlファイル）から同じjsファイルを読み込むなら絶対パスを使って</head>タグの直前に同じコードを記述して読み込むと思う。

<head>
<script type="text/javascript" src="https://pg-happy/js/sample.js" ></script>
</head>

CSSから画像を読む場合は絶対パスを使う

やはり同じくこのケース

/css/sample.css

cssファイルの中で読み込みたい画像は、cssファイルから見た相対パスで書く

background-image : url(../images/icon-apple.png);
background-image : url(./icon-banana.png);

JavaScriptでCSSを指定してHTMLに読み込ませるパス

おなじくこのケース

/js/sample.js

jsファイル→CSSと読み込んでhtmlファイルにcssを反映させるなら
絶対パスか、htmlファイルから見た相対パスを書かないといけない。間違えてjsファイルから見た相対パスを書くと駄目。

jsでcssを読み込む部分

let linkTag = document.createElement("link");
linkTag.href = "./css/sample.css"; //sample.htmlから見た相対パス（または絶対パス）
linkTag.rel = 'stylesheet';
linkTag.type = 'text/css';
document.getElementsByTagName("head")[0].appendChild(linkTag); //sample.htmlのheadタグに追加する

JavaScriptで動的に画像を読み込んでHTMLに反映させるパス

同じくこのケース

/js/sample.js

jsファイルの中で動的に画像を読み込んで、sample.htmlに反映させるには、sample.htmlから見た相対パスか、絶対パスを使う。

var appleImg = document.createElement("img");
appleImg .src = "./images/icon-apple.png";
bodyTag.appendChild(appleImg );

絶対パスを指定するために、jsファイル自分自身のパスを取得するには

このようなケース

sample.js

//sample.jsファイルまでの絶対パスをとる
function getOwnUrl() {
    var url;
    var scripts = document.getElementsByTagName("script");
    var i = scripts.length;
    while (i--) {
        var match = scripts[i].src.match(/(^|.*\/)sample\.js$/); //sampleのところは自身のjsファイル名に変更する
        if (match) {
            url = match[1];
            break;
        }
    }
    return url; //このサイトだったら https://pg-happy/tool/ という文字列を取れる
}

var ownURL = getOwnUrl(); //sample.jsまでの絶対パスを取得
var cssURL = ownURL + 'sample.css';
var bananImgURL = ownURL + 'icon-banana.png';

//以後でcssURLとbananaImgURLの絶対パスを利用

（参考にしたサイト様→自分自身が設置されているURLを取得する）