javascript - 不允许加载本地资源(图像缩略图)

Question

我正在制作一款应用程序，允许用户更改与 mp3 文件关联的图像。选择图像后，该图像的小缩略图就会出现在屏幕上。从项目文件夹外部选择图像时，我遇到了安全错误。这对我来说是新领域。解决这个问题的协议(protocol)是什么？

我还在使用 Vue.js 和一个简单的实时服务器。避免这种情况发生的唯一方法是将图像放在我的项目文件夹中，但显然，使用此应用程序的人不会有这样的情况。

<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'])
      }
    },
  })

控制台输出为: url(C:\fakepath\image.jpg) 但是，错误给出:不允许加载本地资源:file:///C:/%C3%BAkepath%0image.jpg

Answer 1

您无法使用 Javascript 通过浏览器中的绝对链接访问计算机上的本地文件，因为这可能会造成潜在的安全漏洞。

您需要来自服务器的相对链接。