vue图片展示本地Not allowed to load local resource

在Vue中展示本地图片时出现"Not allowed to load local resource"的问题是由于浏览器的安全性策略所导致的。浏览器禁止直接访问本地文件，以防止恶意脚本获取用户的敏感信息。

为了解决这个问题，你可以将图片资源上传到服务器并通过URL地址来引用。或者，你也可以使用Base64编码将图片转换为字符串，然后将该字符串作为数据绑定到Vue组件中。这样可以绕过浏览器对本地文件的限制。

以下是一个使用Base64编码展示本地图片的示例：

<template>
  <div>
    <img :src="imageData" alt="Local Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: ''
    }
  },
  mounted() {
    this.getImageData();
  },
  methods: {
    getImageData() {
      // 通过Ajax或其他方式获取本地图片的Base64编码
      // 替换路径为你的本地图片路径
      this.imageData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wAARCAF3AfADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9vRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBhr3iS6jJFVYvIINACjAzT53Gc0UAZKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//2Q==';
    }
  }
};
</script>

这样，你就可以在Vue组件中展示本地图片而不会遇到"Not allowed to load local resource"的问题。