vue 展示本地图片三种方法

最新推荐文章于 2024-05-10 11:28:08 发布
最新推荐文章于 2024-05-10 11:28:08 发布
阅读量2w 收藏 22
点赞数 5
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/josiecici/article/details/107863347
版权

第一种:直接写

两个都可以 如果@配置了的话

<img src="../assets/img/mapchange/map1.png" alt="">
<img src="@/assets/img/mapchange/map1.png" alt="">

第二种:import 然后在data内定义后 src绑定

在这里插入图片描述

第三种：data内 require(’ 地址路径’) src直接绑定

在这里插入图片描述

星良辰寻
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】本地图片展示的六种解决方案
学无止境
06-26 3351
【Vue】本地图片展示的六种解决方案
vue中如何显示图片
爬楼梯的前端小白的博客
03-25 6725
<template> <div class="login"> <div class="login_box"> <div class="img"> <img :src="imgUrl" alt="" srcset="" /> </div> </div> </div> </template> <script> import im.
springboot结合vue如何展示服务器磁盘里的图片，如何预览图片
最新发布
Cabriella_的博客
05-10 428
springboot结合vue如何实现服务器上的图片预览
【Django+vue3】上传和显示图片
qq_51248362的博客
11-26 2058
最近在学习使用django和vue3写一个前后端项目，在上传用户图片这边卡了好一会儿，网上找了好多资料，最后还是自己总结了一点经验。我前端用的是elment-plus框架，上传图片用了el-upload组件，后端采用django，前后端分离。本文主要介绍如何利用vue3 + django上传图片和显示图片。
vue下拉框选择icon图标
weixin_48005976的博客
02-14 2375
vue下拉框选择icon图标
vue实现图片预览功能，提高你的开发效率
在写作的路上持续输出。
02-22 3034
vue实现图片预览功能，你知道了吗？
vue访问图片
weixin_45630345的博客
08-19 3035
首先说明一下我的图片所放位置，接下来用三种方式访问图片： 第一种方式：static static静态资源文件访问，原样输出，不参与打包; 在打包结束后若路径出现问题，找到config中的index.js，进入后将bulid中的assetsPublicPath：’/‘改为assetsPublicPath：’./’，再重新打包。 <img :class="img1" src="../../static/3.jpg" alt=""> <img :class="img1" src="../.
详解VUE调用本地json的使用方法
10-17
在Vue.js应用中，调用本地JSON文件是常见的数据加载方式，特别是在开发阶段。这篇文章将详细解释如何在Vue中实现这一功能，同时提供一个实际的示例。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据...
vue图片加载失败时用默认图片替换的方法
10-16
主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue src动态加载请求获取图片的方法
10-17
本篇文章将详细讲解如何在Vue中通过`src`属性动态加载本地图片和请求获取的图片。 一、加载本地图片 1. **图片目录结构**： 通常，我们会在项目的`src/assets`目录下存放项目中的静态资源，包括图片。例如，你...
vue鼠标悬停图片放大特效
04-25
在Vue.js应用中实现鼠标悬停图片放大的特效，是一种常见的交互设计，它可以提升用户体验，让用户更方便地查看图片细节。下面将详细讲解如何利用Vue.js和CSS3来创建这样的功能。 首先，Vue.js是一个轻量级的前端框架...
Vue实现点击显示不同图片的效果
12-11
本文实例为大家分享了Vue点击显示不同图片的具体代码，供大家参考，具体内容如 使用Vue中的以下知识点来显示效果 ①：v-for：循环遍历数据 ②：v-bind:class={ }：绑定样式 ③：v-on:click（简写@click）：点击事件 ④：v-if：判断 <!DOCTYPE html> <html> <head> <title>点击显示相对应的图片</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .myul{ display: flex; } .myu
基于vue+ bootstrap实现图片上传图片展示功能
08-30
主要介绍了基于vue+ bootstrap实现图片上传图片展示功能,需要的朋友可以参考下
解决Vue打包后访问图片/图标不显示的问题
10-16
在开发Vue应用的过程中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，在线上环境运行时，图片和图标的资源无法正常显示。这个问题主要是由于打包过程中的路径问题导致的。以下将详细介绍如何解决...
VUE实现一种有趣的图片展示方式
qq_32109661的博客
02-20 2349
写在前面 在网上找找一些有趣的网页设计，结果发现了这么一个Paolo Prendin，效果很好看 觉得这种设计很有意思，但是他的设计里图片总是半张半张的，只有少部分图片会刚好拼成一个，觉得不太好，就自己实现一个，我实现的是这个样子的，中间的图片总是能拼成完整的一张 页面结构 从这个页面效果就能很容易看出页面分成上下两部分，两个部分都不能滚动，然后再配上两组不换行的图片行就可以了。 Html代码如下 <div id="app" class="img_wall"> <!--
【Vue3】实现前端管理系统必备（2）——图片预览和地图
qq_50485858的博客
02-23 1548
v-viewer组件实现图片预览 vue3引入腾讯地图
【Vue】关于开发中本地图片加载失败的经验总结
NineWaited的博客
06-07 8586
关于vue网页的开发过程遇到本地图片加载失败的解决方法
Vue2瀑布流图片展示（Waterfall）
Mr Dear的博客
12-06 4245
Vue2使用纯CSS和JS计算两种方式实现的瀑布流图片展示组件
vue 图片下载到本地，图片保存到本地
热门推荐
bamboozjy的博客
08-13 5万+
必须同源（访问的网站域名与服务器域名一致）才能下载 downs() { var alink = document.createElement("a"); alink.href = this.shop.shoppic_url; alink.download = "pic"; //图片名 alink.click(); },   解决图片不同源下载问题： downloadIa...
vue图片展示本地Not allowed to load local resource
09-24
在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、付费专栏及课程。

余额充值