| 普通のimgタグ |
index.html |
<img src="assets/img/1.png" alt="1">
|
|
| 外部スタイルシート url |
assets/css/style.css |
<div class="box sample02"></div>
/* asset/css/style.css */
.box {
width: 150px;
height: 150px;
background-size: 100% 100%;
}
.sample02 {
background-image: url('../img/2.png');
}
|
|
| インラインスタイル url |
index.html |
<div class="box"
style="background-image: url('assets/img/3.png');">
</div>
|
|
| 内部スクリプト fetch |
index.html |
<img class="sample04" alt="sample04">
<script>
fetch('assets/img/4.png')
.then(res => res.blob())
.then(blob => {
var img = document.querySelector('.sample04')
img.src = URL.createObjectURL(blob)
})
</script>
|
![sample04]()
|
| 外部スクリプト fetch |
index.html |
<img class="sample05" alt="sample05">
// assets/js/index.js
fetch('assets/img/5.png')
.then(res => res.blob())
.then(blob => {
var img = document.querySelector('.sample04')
img.src = URL.createObjectURL(blob)
})
|
![sample05]()
|
