[vue] <img src="[object Module]"> 이미지가 나오지 않을 때

vue-cli 라던가 웹팩의 설정은 역시 너무 어렵다...

 

.vue 파일 안에 작성된 <img/> 태그가 정상경로를 입력했음에도 불구하고 화면에 이미지가 나오지 않았다.

요소 검사를 해보니, src 속성값이 [object Module] 로 나오더라.

<!-- Source code -->
<img src="@/assets/img/ico_mobile.png">

<!-- built -->
<img src="[object Module]">

 

해결하고 나니 방법은 허무하리만치 간단했지만, 몇 시간을 고생했다. ㅠ

vue-cli를 사용한다면 vue.config.js 파일에 아래와 같이 esModule: false 를 설정하면 말끔하게 해결된다.

 

vue.config.js

// vue.config.js

module.exports = {

    /* 이미지 파일 (svg 제외) */
    config.module.rule('images')
      //.test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('url-loader').loader('url-loader')
      .tap(options => Object.assign(options, { esModule: false }));
      
    /* svg 파일 */
    config.module.rule('svg')
      .use('file-loader')
      .loader('file-loader')
      .tap(options => Object.assign(options, { esModule: false }));
}

 

 

png 파일 변환

svg 파일 변환

 

아 허무함. ㅋ

웹팩의 신이 되고싶다.

 

---

https://github.com/vuejs/vue-loader/issues/1612

'src' of img tag become src="[object Module]" in browser · Issue #1612 · vuejs/vue-loader