当前位置:首页 » 文件传输 » vue访问本地存储的图片
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

vue访问本地存储的图片

发布时间: 2022-11-03 11:21:35

① Vue 图片资源路径问题

web需要大量图片,图片来源大致分为这几个:

静态的应该是指类似 logo 之类的,用作页面修饰的图片。

动态的是指从服务器动态得到的(如博客图片每一篇都不一样,需要动态获取)。

写法大致分为这几个:

由于是新手,所以不从原理探究,而是了解用法。

仔细观察项目目录,分有 public 和 asserts 文件夹:

顾名思义,这两个文件夹应该管控资源。

首先从asserts开始。

我们首先打开 App.vue ,查看template:

里面定义了一个 Vue logo,其中引用了asserts文件夹的图片。根据路径,我们可以找到图片路径。那么如果我们有其他图片,自然也可以类比使用。

接下来我们看看在更高层目录(组件)中是否也可以通过这种方式使用:

上面我们在 components 文件夹中使用,通过 .. 尝试使用asserts文件加下的logo图片,然后查看效果:

出现了两个 logo 图片,第一个是在 App.vue 中使用的,第二个是在我们的 hello world 组件中使用,符合预期。

那么类推,在任何位置的组件我们可以直接在 img 标签中使用 asserts 的图片标签。

这种方法应该是静态的,因为在 Vue 中,我们不该使用 js 获取。

除去 img 标签,另一个十分重要的图片引入方法为通过 background-image 属性引用,试试看是否有效:

我们定义了一个 div 标签,占用 200x200空间,并让 background-image 引用与 img 标签相同的路径:

结果显示 div确实存在,但是背景图没有显示出来,怎么回事?

按下 F12 打开 dev tools , 让我们检查下路径:

可以看到 img 标签的 src 变为了 /img/logo.82b9c7a5.png , 而不是我们写入的 ../assets/logo.png ,而 div 的背景路径没有发生改变,导致无法显示正确的背景图片。

通过这种方式可以了解到: img 标签的路径会被正确转换,而 background-image 不会被转换。

举一反三,我们尝试在 data 中写入路径引用:

那么这个img路径自然也不会被处理,从而无法显示。

public 文件夹在项目根目录。

根据搜索到的资料, public 文件夹不会被 webpack 处理,你用什么路径引用他就是什么,那么原理上,我们可以在 img

, background-image , data 中正确的引用它。

可以看到,在这个文件夹下直接引用了 favicon.ico 并且成功加载了。

类比,在我们的 helloworld 组件中使用:

(为了效果明显,我把logo在public文件夹下拷贝了一份)。

结果, asserts 引用与 public 引用都得到了正确的显示。

再结合之前对 asserts 的探究,通过在文件末尾添加哈希值,避免了public的命名冲突。

因为是新手,所以只能从表观来理解,希望以后随着深入能从原理上理解。

asserts 文件夹下的资源会被 webpack 处理(添加哈希值等等),导致直接引用无法找到文件。

public 文件夹下的资源不会被处理,可以直接通过路径引用。

结合之前的需求(动态与静态资源),我总结了下面想法:

② vue流程图怎么保存

可以保存到本地或者复制粘贴。
如果想保存vue的流程图的话,可以点击右键,选择保存到本地,如果不支持的话。可以复制图片,然后粘贴到电脑桌面上,以此来完成保存。
流程图是使用图形表示算法的思路是一种极好的方法,因为千言万语不如一张图。流程图在汇编语言和早期的BASIC语言环境中得到应用。相关的还有一种PAD图,对PASCAL或C语言都极适用。

③ 在vue项目开发中, 为什么图片要用require 引入。。。而不是直接写本地路径

使用require定义之后,你就可以动态使用了,不用require你就只能写死的。
不用 :src="'../img/image.jpg'" 会被解析为字符串

<imgsrc="../img/image.jpg">//正常加载
<img:src="'../img/image.jpg'">//动态地址,路径被加载器解析为字符串,图片找不到


使用

src1:require('../img/image1.jpg'),
src2:require('../img/image2.jpg'),
index:1,
<img:src="index=0?src1:src2">//动态地址,正常加载

④ vue怎样获取到本地D盘下的指定文件,并且能显示出来,读取内容方法一行行读取,不能用input/upload。

没有其他办法。
google可能让开发者能随意获取用户信息吗?
请采纳

⑤ vue移动端项目中 我需要点击按钮保存一张图片,测试中pc端是可以的, 移动端保存不了

可能和a标签的download属性兼容性有关系,对于不支持的浏览器可以引导用户以右键另存为或长按保存的方式下载

⑥ vue中,图片<img src="path"/>如何加载绝对路径的图片例如:D:/photo/fileName

assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖

static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename]

根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件。

⑦ qqvue浏览器可以点击保存图片吗

可以,用手按住图片,就会出现图中的“保存图片”和“查看图片”,点击“保存图片"保存。

⑧ vue的css里面怎么引用public文件夹里面的图片呢

可以用"@"指向src目录,再找到public目录。
也可以在发布的时候直接使用根目录的结构,即使用"/"作为根目录,然后按路径找到public目录。

⑨ vue.js项目开发,base64格式图片怎么在前端页面显示

首先直接把base64编码复制到浏览器里面看是否能正常查看,
如果能img 直接 src 赋值就OK了
如果不能就是图片损坏了~~望采纳谢谢~

⑩ vue.js在data中写了一个mydata对象,里面包含一个图片路径,怎样写才能成功加载图片。

已经明白你的问题所在了。 可以参考下面的代码

//js代码
data:{
myData:[{
img:require('../img/001.png'),//require是一个方法不能放在引号下面,否则获取不到url地址
name:'xxxx',
bigsmall:'xxxxxx',
descript:'xxxxxx',
}]
}
<!--html代码-->
<img:src="item.img"class="thumb">

你可以试一下, 有问题追评,希望可以帮到你