我正在制作一个允许更改与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从浏览器中使用绝对链接从计算机访问本地文件,因为这可能会导致安全漏洞。

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

关于javascript - 不允许加载本地资源(图片缩略图),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57298380/

10-12 13:02
查看更多