[해결완료] 6. vue 이미지 업로드하기

문제

이미지를 업로드하고 해당 이미지를 바로 확인할 수 있게 하라

목적

프로필 수정 시 이미지 변경 기능을 구현하기 위해

시도1.

<v-col>
                  <div class="d-flex justify-content-center">
                    <v-avatar>
                      <img
                        :src="userInfo.imgUrl"
                        :alt="profileImg"
                      >
                    </v-avatar>
                  </div>
                  <v-file-input
                    v-model="profileImg"
                    @click="isShowBtn=true"
                    accept="image/*"
                    label="프로필 이미지 업로드"
                    @change="changeImage"
                    prepend-icon="mdi-camera"
                  ></v-file-input>

                  <div v-if="isShowBtn">
                    <v-btn @click="uploadImage()" color="primary" class="mx-4">이미지 저장</v-btn>
                    <!-- <v-btn @click="deleteImage()" color="green" >이미지 제거</v-btn> -->
                  </div>
                </v-col>

input에서 받은 String 형태의 imgUrl경로를 그대로 img src에 바인딩했다.
ex) userInfo.imgUrl = '45432adfadf.png'
이 상태로 맞왜틀을 했지만
스트링 형태의 경로가 아닌 url 주소를 통해서 이미지를 불러와야 한다!!

시도2.

이전 프로젝트 참고

이미지를 가져오는 url이 따로 있구나,,,!

VUE_APP_IMG_URL=https://i6e101.p.-------io/static/res

위와 같이 이미지를 가져오는 환경 변수를 설정해줘야 한다!

그리고 나서

this.userInfo.imgUrl = `${process.env.VUE_APP_IMG_URL}/${res.data.imgUrl}`

url에다가 imgUrl을 붙여줘야 한다

한 3일을 헤매다가 찾았다......!
아주 뿌듯하군..