[Vue.js] img 태그 src 속성 사용 시 이미지가 나타나지 않는 경우 해결

[Vue.js] img 태그 src 속성 사용 시 이미지가 나타나지 않는 경우 해결

 

기본 html 문법처럼 img 태그와 src 속성 세팅을 했는데 이미지가 보이지 않는 경우이다.

이미지는 vue-cli 프로젝트에서 src > assets 폴더 내에 위치해있다.

html 문서에서는 img태그를 사용해서 이미지를 불러올 때 다음과 같이 작성한다.

<img src="./images/image1.png">

하지만 vue에서 위와 같이 작성하면 이미지가 나타나지 않았다. html 형식으로 작성을 했을 때 코드를 열어보면 다음과 같이 세팅이 되어 있는데, 링크가 저렇다면 정적 파일 위치에 접근해야 한다.

여기서 해결해낸 방법으로 2가지 방법이 있다.

• 1. Web Server 파일 접근 방식 (정적 파일 접근)
• 2. WAS 파일 접근 방식 (동적 파일 접근)

 

위 두가지 방법을 살펴보자.

 

1. Web Server 파일 접근 방식 (정적 파일 접근)

 

vue cli 프로젝트에서 정적 파일은 public 폴더에 담겨있다. public 폴더에 이미지를 넣고 경로를 넣어주면 바로 불러올 수 있다.

 

/src/assets/ 폴더에서 public/index.html가 있는 public 폴더, 즉 정적 파일을 담는 public 폴더로 옮겨서 바로 보이도록 할 수 있다.

 

2. WAS 파일 접근 방식 (동적 파일 접근)

was에서는 경로 요청에 대한 해석을 한 후 return 해주는 방식을 말한다. 즉, 동적 파일 접근 방식이다.

 

이 방법이 더 vue방식으로 작성하는 방법이라 할 수 있지만, 정적 파일을 사용할 때는 위 1번 방식처럼 사용해도 무관하다.

 

우선 이 방법은 public 폴더 내에 있는 정적 파일에 접근하는 방식이 아니다. 따라서 제목과 글 최상단에서 얘기했던 것처럼 src / assets / 폴더 내에 이미지가 위치해 있는 상태이고, 파일 경로를 작성해도 직접 접근할 수 없기 때문에 이미지는 나타나지 않는다.

 

1) 동적 파일을 요청할 수 있는 코드 작성

2) vue 방식 data-binding

 

먼저 동적 파일을 요청할 수 있는 코드를 작성한다.

// App.vue
<script>
export default {
	data : ()=>({
    	img : require('./assets/image.png')
    })
}
</script>

동적 파일을 요구할 때 require를 사용해서 받을 수 있다.

 

 

html 코드상에서 vue 방식의 데이터 바인딩하는 코드를 작성한다. vue에서 속성 값을 바인딩 할 때는 v-bind:src="" 라는 vue 문법을 사용하는데 콜론(:) 하나로 축약해서 사용할 수 있다.

// App.vue
<template>
	<div>
		<img :src="img" alt="">
    </div>
</template>

 

이렇게 하면 동적 파일 데이터를 받아서 바인딩해 처리할 수 있다.

 

위 두 가지 방법으로 이미지가 나타나지 않던 문제는 해결했다.

 

---

두 가지 방식으로 작성한 결과

 

---

도움이 되셨다면 광고 꾹! 부탁드립니다. 글을 작성하는데 힘이 됩니다. 감사합니다.^^