vue中展示本地图片

48 篇文章 0 订阅

        项目中常常要用到本地图片,一般都放到了assets中,如何使用呢?

<img :src="src" />

// 在data中定义src

data(){
    return{
     src:require('@/assets/img/book.jpg')
   }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue展示本地图片时出现"Not allowed to load local resource"的问题是由于浏览器的安全性策略所导致的。浏览器禁止直接访问本地文件,以防止恶意脚本获取用户的敏感信息。 为了解决这个问题,你可以将图片资源上传到服务器并通过URL地址来引用。或者,你也可以使用Base64编码将图片转换为字符串,然后将该字符串作为数据绑定到Vue组件。这样可以绕过浏览器对本地文件的限制。 以下是一个使用Base64编码展示本地图片的示例: ```html <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"的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值