vue 大量图片展示_vue动态显示图片

如果图片直接写死在html或者css里的，webpack会处理这个图片最终的地址(会用到url-loader)

所以如果在初始化的时候使用了相对路径，webpack会编译成两种形式，绝对路径或者base64字符串

实例：

image.png

绝对路径

图片以绝对路径(以/开头的路径就是绝对路径，/指根目录，根目录自爱本机就是指磁盘，在github上就是仓库的根目录)进行查找，图片的目录为/static/img,但是我们查看static目录下并没有找到img目录，那么路径如何来？

对项目运行npm run build，在dist目录下面可以找到该图片，所以， webpack打包后，会把静态资源放在dist目录下，我们的网站实际上是以dist目录作为根目录，并由此加载该目录下的资源。

当vue动态定义图片路径的时候，url-loader是无法探测到图片地址的。我们build后发现，图片不会打包输出到dist目录下(webpack是按需加载的)

如何解决：

1.访问绝对路径

把图片放到静态资源目录中(build会将static目录的we年或者文件夹放到dist目录中)，并用/static绝对路径访问

image:'/static/imgs/1.jpg'

2.使用require

如果想在不调整目录结构的情况下读取图片，还可以使用require

缺点：由于commonJs只允许使用字符串字面量，所以不利于组件化，灵活性差

image:require('../assets/imgs/2.jpg')

3.使用import

import userPath from '../assets/user.png'

export default{

data(){

return {

src:userPath

}

vue 大量图片展示_vue动态显示图片相关推荐

vue 大量图片展示_Ant Design of Vue 展示多张图片
//Vue.use(vueDirectiveImagePreviewer) export default{ name:'TableList', components: { STable }, inje ...
viewer vue 文档_vue基于viewer实现的图片查看器
vue2-viewer vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能 vue2-viewer 是viewer.js vue的实现,效果以及样 ...
vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法
最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面 ...
Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...
vue解决微信防盗链接图片无法展示问题
vue解决微信防盗链接图片无法展示问题 1.需求背景最近在vue项目的页面中使用到了微信公众号项目的图片,然后在另一个项目中引用时出现了防盗链接的提示,导致图片本身的内容无法展示. 解决方案防盗链 ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
VUE Base64编码图片展示与转换图片
VUE Base64编码图片展示与转换图片 VUE Base64编码图片展示与转换图片 VUE Base64编码图片展示 Base64编码转换图片文件转换base64编码更便捷的图片转化Base6 ...
Vue 无法展示网络图片处理方案
一.Vue 无法展示网络图片处理方案问题: 因为项目需求,项目中引用了图片的网络链接,但是发现了很奇怪的问题,图片链接如果在浏览器的地址栏中可以直接打开,如果在前端项目的Img标签中却无法被渲染. ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...

vue 大量图片展示_vue动态显示图片

vue 大量图片展示_vue动态显示图片相关推荐

最新文章

热门文章