[js] 이미지 404 에러 (img 404 error)

이미지 경로를 포함한 객체에서 경로를 못읽을때 발생하는 404 에러 해결방안이다.

 

(나의 개발환경은 vue.js 이다. 객체를 v-for로 반복문을 통해 호출하고, 객체의 path 값을 이미지 경로로 사용하여 렌더링한다.)

 

 

 

---

상황

 

1. HTML 부분 (vue.js 의 template)

<button v-for="(list, index) in imgArr" :key="index">
   <img :src="list.path" />
</button>

객체의 이미지 경로는 다음과 같이 호출하였다.

 

 

 

2. 사용 객체

let imgArr = [
   { name: '테스트 이미지', path: '@/assets/img/my-img.png' }
]

호출 대상이 되는 객체는 다음과 같은 형태이다.

이때 빌드를 수행하면 아래와 같은 404 에러가 발생한다.

 

 

404 error

 

 

해결방안

 

에러의 원인은 다음과 같다.

 

imgArr 배열의 path 값을 넘겨받을때 ('@/assets/img/my-img.png'),

템플릿 단에서는 해당 데이터가 문자열인지 리소스인지 구분할 수 없다.

때문에 다음과 같이 객체 형태를 변경하여 리소스임을 알리면 에러는 해결된다.

 

 

let imgArr = [
   { name: '테스트 이미지', path: require('@/assets/img/my-img.png') }
]

 

 

 

---

 

 

참고링크 : https://stackoverflow.com/questions/34990793/image-src-get-404-error-with-vuejs