Vue) 이미지 URL 입력 시 로드가 안되거나 [object Module] 뜨는 경우

 

 현 상태 

 

이렇게 이미지 주소가 담긴 배열을 반복문을 돌려 화면에 뿌려주려 한다. 

 

 

우선 require을 써야하고, 

썼는데도 로드가 되지않고 콘솔에 다음과 같이 [object Module] 이라고 찍혀있다.

 

 

 원인 

esModule을 끄지 않아서.

url을 commonJS 으로 처리하기 때문에 esModule 방식을 꺼야한다.

 

 

 

 해결 

webpack.config.js

module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
      { test: /\.(gif|svg|jpg|png)$/, use: {loader : 'file-loader', options : {esModule: false}} },
    ]
  },

 

 

만약 위와 같이 설정했는데도 이미지가 보이지 않는다면, 

pakage.json에 file-loader가 잘 설치되어있는지 확인해봐야 한다.