JavaScript フレームワーク fairy support js 画像

src/frame/sample.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="$envValue(jsRoot)/fairysupport.min.js" data-page-root="$envValue(pageRoot)"></script>
</head>
<body>
$page()
</body>
</html>

src/page/index.html

$frame(sample)
<div data-obj="obj"></div>
<div class="sample"></div>
<div><img src='$img(aaa/bbb/a.png)'></div>
<div><button data-name="sample">sample</button></div>

src/js/modules/index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.loadStringTemplate(this.obj, this.template());
    }
    
    template() {
        return `
            <div><img src='$img(aaa/bbb/a.png)'></div>
        `;
    }
}

src/css/index/app.css

.sample {
   background-image: url("$img(aaa/bbb/a.png)");
   background-repeat: no-repeat;
   width:100px;
   height:100px; 
}

src/env/envValue.json

{
     "jsRoot" : "http://localhost:8000/js"
    ,"pageRoot" : "http://localhost:8000/page"
}

src/img/domain.txt

http://localhost/img/

src/img/domain.local.txt

http://localhost:8000/img/

src/img/maxSize.txt

src/img/maxSize.local.txt

src/img/aaa/bbb/a.png

なにか適当な画像をおいてください

npm run watch_localが実行されたらdistWork/page、distWork/js、distWork/cssを見てみましょう
$img()の部分が置換されています
src/page、src/js、src/css配下のファイルは$img()を書いておくと、src/img配下から該当のファイルを探し、src/img/maxSize.{環境}.txtファイル内に書いてあるバイト数以下であればbase64エンコードされた値で置換され、src/img/maxSize.{環境}.txtファイル内に書いてあるバイト数よりも大きい場合、src/img/domain.{環境}.txtに記載された内容を先頭に付けた文字列で置換します
$img()を置換されないようにするには\マークを付けてください

次ページビルド

目次