[Nuxtjs] base64 인코딩할 이미지의 파일 크기 한도 변경
4805 단어 자바스크립트url-loadernuxt.jswebpack
TL; DR
nuxt.config.js 의 build 속성을 사용하여 base64 인코딩할 수 있는 이미지의 파일 크기 제한을 변경할 수 있습니다. 개요
실제로 어떻게 할까
결론부터 말하자면, 아래와 같이 쓰면 base64로 인코딩해주는 정적 파일의 크기 상한을 변경할 수 있었습니다.
nuxt.config.js
module.exports = {
extend(config, { loaders }) {
// これで1MB以下のassetsディレクトリにある静的ファイルがbase64エンコードされます。
loaders.imgUrl.limit = 100000
},
}
이
static 와 loaders 가 어디에서 왔기 때문이라고 하면, 아래의 문서에 기재되어 있었습니다.htps : // 그럼. 없는 xtjs. 오 rg / 아피 / 곤후
// loadersの中身
{
file: {},
fontUrl: { limit: 1000 },
imgUrl: { limit: 1000 }, // デフォルトは1KB
pugPlain: {},
vue: {
transformAssetUrls: {
video: 'src',
source: 'src',
object: 'src',
embed: 'src'
}
},
css: {},
cssModules: {
localIdentName: '[local]_[hash:base64:5]'
},
less: {},
sass: {
indentedSyntax: true
},
scss: {},
stylus: {},
vueStyle: {}
}
모든 코드를 추적하지 않기 때문에
imgUrl의 속성이 imgUrl의 설정과 연결되어 있는지는 알 수 없지만 속성 이름에서 예측할 수 있었기 때문에 시도한 결과 base64 인코딩되었습니다.그건 그렇고, base64로 인코딩되면 html에서 이렇게됩니다.
요약
Reference
이 문제에 관하여([Nuxtjs] base64 인코딩할 이미지의 파일 크기 한도 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ume-kun1015/items/6d7a5bd15286ca1381f0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
