ionicのWEBアプリをサブディレクトリにアップする方法 多分、これでOK
前書きです。
本文の方法は、home.page.html上でimgタグを使用した場合ですが、使わない(画像はscssの方で設定)するならば、以下の方法の方が簡単かもしれません。(十分テストしたとは言えませんが)
1.ビルド先をプロジェクト直下の"angular.json"で設定
2.src\index.htmlで、<base href="/" />を定義
ビルドするとwww直下に上で設定したサブディレクトリが作られます。
参考サイト
Ionic(Angular)のフォルダ構成を完全解説
https://blog.np-sys.com/ionicangular-folders/
ただミスがあるのかもしれませんがhtml上の<img>タグのリンクではうまく行っていないです。
(ケアレスミスの可能性もありますが)
このところ続けて投稿したionicのWEBアプリをサブディレクトリにアップする方法ですが判っている範囲で解決です。
まず何が問題かを説明しますと
・ionicで作ったプロジェクトはwww直下に置くことが前提になっている
・そのためビルドしたディレクトリおよびフォルダをサーバのサブディレクトリにアップしても動作しない
次に解決策ですが、home.page.htmlで<img>タグのsrcで相対パスで指定した画像以外は、以下の方法で解決します。
なおtype="blank"以外で作ったプロジェクトですとhome以外の名前になっているかもしれませんので、適宜読み替えお願いします。
参考サイト：
【Ionic4】WEBアプリをサブディレクトリにアップする方法
https://lifehackdev.com/ZakkiBlog/articles/detail/web44
index.htmlの上の方の
<base href="/" /> を
<base href="/アップするディレクトリ名/" />に変更
(www直下のサブディレクトリ名にアップする前提です）
次に、home.page.html内<img>タグのsrcで相対パス指定した画像の場合の対応です。
まず、以下のようにsrcプロパティはデータバインディングが可能ですので、それを利用します。
(今回、試して初めて知りました)
<img src={{dicelink1}} class="imgDice" [hidden]="Dice1Value!='1'">
変数の初期値は"ionic serve"で正しく動作する相対パス、例えば
dicelink1 = "../../assets/image/cube1.gif"
などにして置きます。
次にサーバのサブディレクトリにアップした場合とwww直下の場合を区別する必要があるので、
"location.pathname"
を使用します。
具体的には、"ionic serve"で立ち上げた場合を含むwww直下の場合は
location.pathname は、"/home"
www直下のサブディレクトリにアップした場合は
ocation.pathname は "/アップしたサブディレクトリ名/home"
になります。
ですので、location.pathname が "/home" の場合は何もせず、そうでない場合は、
例えば
---------------------------------------------------------------
let locationpath=location.pathname;
locationpath=locationpath.replace("/home",""); //余分な"/home"を削除
this.dicelink1=locationpath + "/assets/image/cube1.gif"; //画像の相対位置になります
---------------------------------------------------------------
のような方法で表示される前に修正すればOKです。
相対パスでないならば、当然変更する必要はありません。
投稿
