사용자 이미지 올린 것 미리보기

[유용환]

<div class="img">
        <input type="file" id=file @change="fileUpload">
        <label class="upload" for="file">+</label>
        
    </div>
    <div class="imgs" :style="{backgroundImage : `url(${this.$store.state.file_load.name})`}"></div>


file_load : '',


fileUpload(e){
      this.$store.state.file_load = e.target.files
      console.log(this.$store.state.file_load)
    }

이렇게 해서 실행하면 콘솔에 file이라는 오브젝트 안에 name이라는 것으로 사용자가 올린 이미지의 경로가 올라와 있는데
이미지가 안보여집니다. 이거 왜 그런건가요
사용자가 이미지를 올렸을때 보여줄 css는 다 해놓았습니다.
get 404 이라는 오류도 나오긴 하는데 이건 별 문제가 아니라고해서 그냥 무시했습니다.

[codingapple]

firebase 쓰는거면 firebase에 이미지 먼저 업로드하고 그 url을 가져와서 html에 넣는 식으로 코드짭니다

[유용환]

<form id="contact">
            <fieldset>
              <input placeholder="글 제목" type="text" tabindex="1" @change="userTitle"  required autofocus>
            </fieldset>
            <fieldset>
              <textarea placeholder="글 내용" tabindex="5" @change="userContent" required></textarea>
            </fieldset>
            <fieldset>
              <button name="submit" type="submit" id="contact-submit" @click="more">Submit</button>
            </fieldset>
            
          </form>

userTitle(e){
      // db.collection('user_post').add({title: e.target.value})
      this.$store.state.user_title = e.target.value
      console.log(this.$store.state.user_title)
    },

    userContent(e){
      // db.collection('user_post').add({content : e.target.value})
      this.$store.state.user_content = e.target.value
      console.log(this.$store.state.user_content)
    },

    more(){
        
        db.collection('user_post').add({title : this.$store.state.user_title ,
        content : this.$store.state.user_content})
        console.log(this.$store.state.user_title, this.$store.state.user_content)
    },   => click 했을때

이렇게 하면 콘솔창에는 나타나는데 파이어베이스 데이터베이스에는 안올라오는데 확인 해주실수있나요
(코드 복붙해서요)

[유용환]

위의 질문은 제가 잘못올려서 답변 안해도 됩니다.
<input   type="file" id=file @change="fileUpload">
 <label class="upload" for="file">+</label>
<img :src="require(`${this.image}`)" width="100px" >
fileUpload(e){
      var file = e.target.files
      this.url = URL.createObjectURL(file[0])
      this.image = this.url
      console.log(this.image)
    }

<img :src="require(`${this.image}`)" width="100px" > 을 넣으면 이상하게 해당페이지가 모두 사라지게 되는데
확인해 봤더니 Uncaught (in promise) Error: Cannot find module '' 이런 에러가 나오는데 경로가 없다는 뜻인가요
왜 이렇게 되는지 잘 모르겠습니다.
img태그에 사용자가 이미지를 올린것을 넣으려고 합니다.

[codingapple]

require 빼고 this.image만 넣어봅시다

[글쓴이]

글