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

【问题标题】：Not allowed to load local resource (image thumbnail)不允许加载本地资源（图片缩略图）
【发布时间】：2019-08-01 04:31:01
【问题描述】：

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

我还在使用带有简单实时服务器的 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

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

您无法使用 Javascript 从您的浏览器通过绝对链接从您的计算机访问本地文件，因为这将是潜在的安全漏洞。

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

【讨论】：