[ Vue ] 이미지 삽입시 변수, 절대경로 사용하기 ( with v-for )

@로 src내 파일 절대경로로 사용

이미지 경로가  src/assets/images/IMG1.png  일때 

vue 에서는  @/assets/images/IMG1.png 로 src를 절대경로로 사용 할 수 있다.

 

그래서 아래와 같은 방법으로 이미지를 삽입 할 수 있다.

<!-- 이미지 삽입 -->
<img src = "@/assets/images/IMG1.png" />

 

 

변수를 사용한 절대경로 사용

 

하지만 변수를 사용하거나 v-for로 index값을 이용하거나 하는 등의 경우에는

위처럼 적용하면 이미지가 제대로 나오지 않는것을 볼 수 있다.

 

아래의 예제가 위처럼 사용하고 변수만 넣었을 경우이다.

 

1. 미작동 예시

<template>
	<img v-for="name in images" :key="num" :src="`@/assets/images/${name}`" alt="테스트" />
<template>
 

<script>
export default {
    data() {
        return {
        	images: ['IMG1.png','IMG2.png','IMG3.png']
        }
    }
}
</script>​

 

사진을 보면 제대로 뜨지 않는것을 확인 할 수 있는데,

Element에서 확인해보면 src에 @가 포함된 절대경로 자체가 들어가 버렸다

 

 

 

 

2. 작동 예시

 

이럴때는

 <img :src="require(`@/assets/images/${img}`)" /> 

위의 형태로 require을 추가해 변수명을 넣어 사용할 수 있다.

<template>
	<img v-for="name in images" :key="num" :src="require(`@/assets/images${name}`)" alt="테스트" />
<template>
 

<script>
export default {
    data() {
        return {
        	images: ['IMG1.png','IMG2.png','IMG3.png']
        }
    }
}
</script>​

 

위처럼 적용해서 넣었을때의 화면.

base64로 변환되어 화면에 보여진다.

 

 

 

background로 절대경로를 사용한 이미지 넣기

참고로 background-image를 넣을때는 아래와 같이 사용한다.

 <div class="product-img" :style="`background-image:url(${imageUrl}) `" />

 

 

---

✔️ 참고

https://ordinary-code.tistory.com/85

https://rnwns2.tistory.com/87