vue框架中，图片应该保存在哪里？应该如何访问？

在使用vue框架进行开发的过程中，有两个文件夹都可以存放我们的图片以及样式等等，一个是public文件夹，一个是src下的assets文件夹；接下来博主会从这两个文件夹对图片的不同处理来进行分析：

public

如果将图片存入public文件夹，系统就会将原来的图片路径及名称编译为一个随机的名字，如下：

经过编译后的图片会极大的减小所占内存，所以在网页中直接展示的图片或者经常随数据库变换而变换的图片都应该放在public文件夹下，这样也可以加快网页的运行速度。

public下的图片用绝对路径来访问（比如下public下的img中有一张图片1.jpg）：

src="/img/1.jpg"

如果要访问动态的图片则用如下写法：

let pic = "1.jpg"

<img :src="`/img/${pic}`">

src/assets

存入assets文件夹下的图片则不会被编译处理，而是原封不动的保存在服务器中；像网页中一些固定不变的图片如登录注册以及其他各种矢量图就应放于assets中。

存于assets中的图片用相对路径来访问：

src="@/assets/img/1.jpg"（@就相当于src）

src="../assets/img/1.jpg"

如果要访问动态的图片则用如下写法：

let pic = "1.jpg"

<img :src="require(`../assets/images/a/${pic}`)">

vue框架中，图片应该保存在哪里？应该如何访问？相关推荐

vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
vue框架中使用iframe内嵌网页,并且双击实现网页全屏放大利用Iframe插入网页 <iframe ref="iframe" src="https://www ...
vue项目中图片地址生成二维码
前言一.图片地址生成二维码二.使用步骤 1.安装插件 2.执行方法(点击图片之后,弹框显示并且显示二维码) 总结前言 vue中点击图片生成二维码,利用的是qrcode插件,在需要使用的页面中引入 ...
VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码
解决有两步: 1.采用渐进式加载:原图未加载完时显示比它内存小的模糊图: 2.采用懒加载:只加载可视区域的图片,即滚动到可视区域时再加载图片 vue-lazyload-img:VUE图片懒加载插件 v ...
vue 组件中图片地址，图片获取
前提:在组件中使用引用图片,用于<img src> 或者背景图片background; 当我们利用vue-cli 搭建好项目的框架,开始高高兴兴开发组件的时候,有的时候想加一张图片, ...
WPS中图片缩小保存后再打开不清晰
在wps中,截图进去一张较大的图片之后,为了节省空间我们将他缩小准备需要查阅时预览查看,保存之后再次打开发现图片被压缩清晰度大大降低: 此时需要设置wps在保存时不将图片压缩:
Vue框架中常见的前端UI库
前言 Vue旗下有很多衍生的UI框架,它们能够很好的提高前端工程师开发效率.今天在这里,笔者做一个整理.将UI框架分为PC和Mobile两大类,并逐一展示 PC版UI库 Element Element ...
antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证
一.项目要求 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功二.思路 ...
Vue框架中使用a标签去掉下划线
text-decoration-line: none 这个起的的作用<div class="createBox"><div class="createB ...

vue框架中，图片应该保存在哪里？应该如何访问？

vue框架中，图片应该保存在哪里？应该如何访问？相关推荐

最新文章

热门文章