我正在制作一个允许更改与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/