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

記事内にPRが含まれる場合があります

2022年7月5日2024年10月30日

URLをコピーしました！

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

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

sample.html

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

&amp;lt;head&amp;gt;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;https://pg-happy/js/sample.js&amp;quot; &amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/head&amp;gt;

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(&amp;quot;link&amp;quot;);
linkTag.href = &amp;quot;./css/sample.css&amp;quot;; //sample.htmlから見た相対パス（または絶対パス）
linkTag.rel = 'stylesheet';
linkTag.type = 'text/css';
document.getElementsByTagName(&amp;quot;head&amp;quot;)[0].appendChild(linkTag); //sample.htmlのheadタグに追加する

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

同じくこのケース

/js/sample.js

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

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

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

このようなケース

sample.js

//sample.jsファイルまでの絶対パスをとる
function getOwnUrl() {
    var url;
    var scripts = document.getElementsByTagName(&amp;quot;script&amp;quot;);
    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を取得する）

プログラミングスクールおすすめラ…