目次
JavaScriptで画像を読み込むパスの話、まずはhtmlからjsを読み込む
こういう階層構造のケース
sample.html
jsファイルの読み込みは絶対パスでも相対パスでも構わない。
WordPressのような全ての記事(全ての階層にあるhtmlファイル)から同じjsファイルを読み込むなら絶対パスを使って</head>タグの直前に同じコードを記述して読み込むと思う。
&lt;head&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://pg-happy/js/sample.js&quot; &gt;&lt;/script&gt; &lt;/head&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(&quot;link&quot;); linkTag.href = &quot;./css/sample.css&quot;; //sample.htmlから見た相対パス(または絶対パス) linkTag.rel = 'stylesheet'; linkTag.type = 'text/css'; document.getElementsByTagName(&quot;head&quot;)[0].appendChild(linkTag); //sample.htmlのheadタグに追加する
JavaScriptで動的に画像を読み込んでHTMLに反映させるパス
同じくこのケース
/js/sample.js
jsファイルの中で動的に画像を読み込んで、sample.htmlに反映させるには、sample.htmlから見た相対パスか、絶対パスを使う。
var appleImg = document.createElement(&quot;img&quot;); appleImg .src = &quot;./images/icon-apple.png&quot;; bodyTag.appendChild(appleImg );
絶対パスを指定するために、jsファイル自分自身のパスを取得するには
このようなケース
sample.js
//sample.jsファイルまでの絶対パスをとる function getOwnUrl() { var url; var scripts = document.getElementsByTagName(&quot;script&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を取得する)
卒業生によるテックアカデミーとテックキャンプの違いを比較 | プログラミングスクールおすすめラボ
テックアカデミーとテックキャンプを3カ月ずつ受講した私(元受講生)がプログラミングスクール両者の違い、メリットデメリットを比較し皆さんの選択を助けます。 人生をよ…
卒業生によるテックアカデミーと侍エンジニア塾の比較 | プログラミングスクールおすすめラボ
ここではテックアカデミーと侍エンジニア塾とそれぞれ3カ月受講したわたくしが、学習スタイルの違いを比較したり、メリット・デメリットを比較いきます。 料金は決して安い…
卒業生によるテックキャンプと侍エンジニア塾の比較 | プログラミングスクールおすすめラボ
ここでは実際に入会して3ヶ月受講した私がテックキャンプと侍エンジニア塾という2つのプログラミングスクールを比較していきます。数か月という時間をかけ学び、安くはない…