不允许加载本地资源（图片缩略图）

Question

I'm making an app that allows one to change the image associated with an mp3 file. Once the image is chosen, a small thumbnail of that image appears on the screen. When choosing an image from outside of the project folder, I run into the security error. This is new territory for me. What is the protocol for working around this?

I'm also using Vue.js with a simple live server. The only way to make this not happen is to have the image in my project folder, but obviously, people using this app won't have that.

<div v-bind:style="styleObject" class="square"></div>

var app = new Vue({
    el: '#app',
    data: {
      styleObject: {
        'background-color': 'white',
        'background-image': 'none'

      }
    },
    methods: {
      updateBG: function(){
        var fullPath = document.getElementById("mp3Artwork").value
        this.styleObject['background-image'] = 'url(' + fullPath + ')'
        console.log(this.styleObject['background-image'])
      }
    },
  })

The console output is: url(C:\\fakepath\\image.jpg) But, the error gives: Not allowed to load local resource: file:///C:/%C3%BAkepath%0image.jpg

Answer 1

You cannot access local files from your computer with an absolute link from your browser using Javascript as it would be a potential security breach.

You need a relative link from your server.