뷰스타그램 강의 중 이미지 관련해서 문의 드립니다.

[choi2j]

이미지를 올리고 필터창과 글쓰기 창에는 보이지만 막상 글을 게시하면
예시 이미지만 나오고 실제 이미지가 적용되지 않습니다.

아래는 코드입니다.

"App.vue"

<template>
<div class="header">
...

<Container :post="post" :step="step" :imgd="imgd" @write="written = $event" />

<div class="footer">
<ul class="footer-button-plus">
<input @change="upload" type="file" id="file" class="inputfile" />
<label for="file" class="input-plus">+</label>

</div>
</template>

<script>
import axios from 'axios';

import Container from './components/Container.vue';
import data from './data/data';

export default {
 name: 'App',
 components: {
 Container,
},
data() {
return {
 post: data,
...
 imgd: "",
 written: "",
}
},
 methods: {
...
upload(e) {
let file = e.target.files;
let url = URL.createObjectURL(file[0]);
 console.log(url);
this.imgd = url;
this.step++;
},
publish() {
var myPost = {
 name: "Kim Hyun",
 userImage: "https://placeimg.com/100/100/arch",
 postImage: this.imgd,
 likes: 36,
 date: "May 15",
 liked: false,
 content: this.written,
 filter: "perpetua"
};
 console.log(myPost);
this.post.unshift(myPost);
this.step = 0;
},
}
}
</script>

위 코드에서 imgd 라는 변수에 이미지 url 데이터를 담았습니다.

[codingapple]

이미지 출력하면 잘 나오는지
이미지를 html에 잘 넣고 있는지 확인해봅시다

[choi2j]

imgd 를 콘솔로 뽑으면 'blob:http://localhost:8080/세부정보' 이렇게 나오고 이걸 myPost에 넣으면
postImage: "blob:http://localhost:8080/ef144463-9041-4d7c-8d80-6cf90087b245" 라고 나옵니다.
뒤에 스타일이 문제인가 싶어서 빼봤지만 제대로 안나와요.

mounted() {
 console.log(this.post.userImage);
}

한 번 Post 하나씩의 컴포넌트를 출력해봤는데 새로 넣은 사진이 적용이 안되네요

[codingapple]

Post.vue까지 데이터도 잘 전송되고 있나 확인합시다

[choi2j]

<template>
<div class="post">
<div class="post-header">
<div class="profile" :style="`backgroundImage: url(${post.userImage})`"></div>
<span class="profile-name">{{ post.name }}</span>
</div>
<div class="post-body"></div>
<div class="post-content">
<p>{{ post.likes }} Likes</p>
<p>{{ post.name }} {{ post.content }}</p>
<p class="date">{{ post.date }}</p>
</div>
</div>
</template>

<script>
export default {
 name: "Post",
 props: {
 post: Object,
},
mounted() {
 console.log(this.post);
}
}
</script>

Post.vue 이후에도 잘 데이터가 가는 것 같긴 합니다.
아래의 첫번째는 새로 추가한 거고, 두번째는 원래 있던 포스트입니다.

[codingapple]

post.postImage 쓰는 부분이 없는듯요 넣어줍시다

[choi2j]

감사합니다 해결되었습니다

[글쓴이]

글