JavaScript Framework fairy support js Image

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

Please put some suitable image

Let's take a look at distWork/page, distWork/js and distWork/css, after npm run watch_local is run.
$img() is replaced.
If you write $img() in files under src/page, src/js and src/css, framework search corresponding file from src/img, If it is less than or equal to the number of bytes written in src/img/maxSize.{environment}.txt, $img() will be replaced with the base64 encoded value, if it is larger than the number of bytes written in src/img/maxSize.{environment}.txt, framework replace $img() with the string prefixed with the content in src/img/domain.{environment}.txt.
If you want to write the string as $img(), add \.

Next page Build

table of contents