Vue에서 이미지 import 하는법이 무엇인가요?

Question

Vue 템플릿에서 static 폴더에 있는 이미지를 import 할 수 있을까요?

그리고 assets 폴더 안에 있는 이미지를 import 하는 방법이

바로 템플릿에 경로 입력
require를 쓰는 법
스크립트 부분에서 모듈처럼 import 해서 data로 리턴

각각 경우에 어떤 차이점이 있나요??

멋진숲제비36 · Accepted Answer

질문하신 내용이 작동하는 방식은 Vue CLI 도구가 만들어낸 프로젝트의 webpack 설정을 살펴보시면 알 수 있습니다. webpack 의 요소중 image 들에 대한 loader라는 것이 설정되어 있습니다. 아래 내용을 보세요.D:\workspace_temp\asset_test>npx vue-cli-service inspect --rule images
/* config.module.rule('images') */
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    /* config.module.rule('images').use('url-loader') */
    {
      loader: 'D:\workspace_temp\asset_test\node_modules\url-loader\dist\cjs.js',
      options: {
        limit: 4096,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}test 필드는 파일의 확장자를 지정하는 것입니다. 파일의 확장자가 png, jpe, jpeg, gif, webp 인 경우를 의미하죠. 이 부분은 정규식(Regular Expression)으로 지정된 것이니 정규식을 학습해보세요. 우선 다음의 loader를 설명드리면우선 test에 지정된 파일의 확장자의 패턴과 일치하는 파일을 로드하는 경우에 node_modules의 url-loader가 작동됩니다. 파일이 로드되는 경우는 import sam from './sam.png' 와 같이 import 하거나 <template> 내에서 img 태그를 통해서 로드되는 경우입니다.url-loader는 url 형식으로 파일을 로드합니다. options으로 4096 byte를 limit으로 잡았네요. 사이즈가 초과되면 대체방법을 file-loader를 사용합니다. 사이즈가 초과되지 않으면 base64 문자열로 바꾸어서 img를 template 내부에 박아 넣습니다. 이 문서를 참조해보세요. https://pilot376.tistory.com/34kb 미만이면 image 파일을 읽어서 base64 인코딩한다음 템플릿으로 렌더링해버린다는 뜻입니다.만일 4kb을 초과한다면 file-loader를 이용합니다. file-loader로 파일을 읽어서 파일명을 바꿔버립니다. 중간에 hash로 8byte를 파일 경로에 집어넣어서 img 디렉토리로 내보낸다는 뜻입니다. 이 기법을 사용하면 장점이 있습니다. 동일한 파일명이지만 다른 이미지로 변경된 경우 hash 값이 달라지기 때문에 브라우저 캐시에 의해 이전에 캐시된 이미지가 나타날 가능성을 차단할 수 있습니다.샘플 코드는 다음에서 확인해보세요. 예제를 다운로드하셔서 yarn build 로 빌드하신 후 dist 디렉토리의 빌드된 파일들을 검토해보세요.https://codesandbox.io/s/asset-test-9sq61이미지는 3군데 사용되어 있습니다. template에서 image를 src로 참조하는 경우에 상대 경로로 표현되어 있으면 리소스처럼 import 합니다. 또는 import sam from './sam.png'와 같이 import 한 경우도 마찬가지 입니다. 만일 상대 경로로 시도했을 때 파일이 존재하지 않으면 정적 자원으로 인식합니다. /public/photos/ 경로의 이미지가 그러한 경우입니다. yarn build로 빌드했을 때 생성된 /dist 디렉토리의 파일들을 보면 정적자원으로 인식한 것은 hash가 부여되지 않고 자원으로 import 한것은 이미지 파일의 경로에 hash가 부여된 것을 볼 수 있을 겁니다.

빠른너구리257 · Answer

첫 번째 질문의 답변은 아래와 같이 root에서 읽으시면 됩니다.<img src="/my-image.png"/>두 번째 질문의 답변은 프로젝트를 generated할 때 vue cli에서 가져오는 방법입니다.vueJS component에 이미지 데이터를 바인딩하는것 입니다.2번과 동일하게 vueJS component에 바인딩 하는것 입니다.2, 3번의 차이는 사실상 없습니다. import는 ES6사양이고 require는 javascript 자체가 지원하는 방법입니다.감사합니다.