231001 src 내부 image 파일 import 후 다운로드 하는 방법

src 내부 image 파일 import 후 다운로드 하는 방법

지난 포스팅에 이어서 이미지를 다루는 방법을 또 마주치게 되었다.

프레임워크의 src 디렉터리 내부에서 이미지 파일을 import 로 호출한 후, 다운로드 받을 수 있지 않을까 하는 생각이었는데, 이것저것 문서를 찾아보니 되었습니다!

import * as imageURL from '~/assets/image/sample/sample.png'


function downloadFile () {
    const img = document.createElement('img')

    img.style = {
        height: '25%',
        width: '25'
    }

    img.src = imageURL.default
    console.log('imported', imageURL)

    console.log(img)    
    console.log(img instanceof Blob)


    // 이미지 다운로드
    let element = document.createElement('a')

    element.download = 'imagename.jpg'
    element.href = imageURL    
    document.body.appendChild(element)    
    element.click()    
    document.body.removeChild(element)

    element = null
}

사실 이러면 아래처럼 security 이슈가 발생하기 때문에 사실 추천하지는 않는 방법입니다.

그러나 DB용량을 조금이라도 아껴보고자 ... 시도해보았습니다. (ㅠㅠ) 물론 큰 차이는 없겠지만 서버에서 이미지를 직접 변경하지 않아도 되는, 번거로움을 줄여줄 수 있는 작업이 될것 같아 시도하였습니다. 실제로 배포하고 나서 포스팅 수정될수도 있음 ㅎ_ㅎ ㅋㅋ 그냥 이런 방법이 있구나 하고 이해하면 될듯.

결과는 이렇게 파일이 잘 다운로드 됩니다.