Fetch Binary Data

[칠불암] 불러오기 [할매부처] 불러오기

 

✓   웹의 동일출처 정책에 의해, 이 예제 코드는 여기서 바로 실행할 수 없다. 이 예제 문서와 가져올 소스는 같은 웹사이트 내에(프로토콜과 호스트 서버, 포트까지) 있어야 한다! 실제 작동 예 보러가기

            
                const btn1= document.querySelector('.f_img_btn1')
                const btn2= document.querySelector('.f_img_btn2')
                const log= document.querySelector('#log_image')

                const image= document.createElement('img') // 빈 img 요소 생성

                /* 1. 프라미스 사용하기 */
                btn1.addEventListener('click', () => {
                    fetch('할매부처.jpg')
                    .then(response => response.blob()) // 가져온 바이너리 파일을 blob 데이터로 읽어온다
                    .then(blob => {
                        image.src= URL.createObjectURL(blob)
                        log.apend(image)
                    });
                });

                /* 2. async와 await 사용하기 */
                btn2.addEventListener('click', () => {
                    async function imageLoading() {
                        const response= await fetch('칠불암.jpg')
                        const blob= await response.blob()

                        image.src= URL.createObjectURL(blob)
                        log.append(image)
                    };

                    imageLoading()
                });