nuxt.js 에서 이미지를 넣는 경우

KYUNGHO·2022년 1월 24일
0

기존의 이미지 태그에는 <img src="test.jpg"> 혹은 <img :src="testData.img"> 이런식으로 추가했었다.

그러나 nuxt에서 위와같은 방식으로 하는경우 에러가 나거나 이미지가 나오지 않는 현상이 있었다.

이때 src에 <img :src="require(../assets/images/test.jpg)"> 같은 형식으로 해주면 해당 이미지를 가져올 수 있다.

또 css에서 이미지 파일을 추가하는 경우 url('~/assets/images/test.jpg') 와같이 작성한 경우 require('~/assets/images/test.jpg')로 변환된다.

이유는 모르겠으나 nuxt의 도큐먼트에 위처럼 나와있으니 일단 위처럼 사용하도록 하자.

** 참고로 assets에 들어있는 파일은 webpack 모듈로 번들(?)을 해준다.

profile
성장을 해보자

0개의 댓글