Vue批量图片显示时遇到的路径被解析问题

最近在学Vue，感觉很难理解，学不懂。

昨天晚上开始第一个页面的搭建，脑子感觉通了一点，大概知道该怎么做了。

在放置轮播图时，要调用很多图片，图片路径在data的一个数组里，用v-for循环（因为还不会做轮播图，从网上找的代码）

图片路径是对的，但是不显示，就用普通img标签放了个图片看了一下，这样

网页上却变成了这样

于是我把每个图片都放了一次，把每个解析后的地址都粘贴在数组里，成了

但是这种方法也太蠢了，以后不能也这样办吧

就在网上查了一下，要加一个require，很多帖子里的图片路径都加了个require，那就试试

成功！ 但是不知道是什么原理，大概是把路径的字符串封装起来了？

然后又去查了查require是干啥的，感觉用过 ，但不知道哪里用过

使用位置

require是运行时调用，所以require理论上可以运用在代码的任何地方

require本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量

这样的话就把路径字符串变成变量了

以上所述是小编给大家介绍的Vue批量图片显示时遇到的路径被解析问题详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue中本地静态图片路径写法

    这里写图片描述 需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id&

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • Vue批量图片显示时遇到的路径被解析问题

    最近在学Vue,感觉很难理解,学不懂. 昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了. 在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码) 图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样 网页上却变成了这样 于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了 但是这种方法也太蠢了,以后不能也这样办吧 就在网上查了一下,要加一个require,很多帖子里的图片路径都加了

  • Vue实现图片轮播组件思路及实例解析

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现 5.示例代码 结构html: <template> <

  • file-loader打包图片文件时路径错误输出为[object-module]的解决方法

    最近在学习使用webpack4.0自己搭建vue脚手架,在搭建过程中,踩了许多坑,使用file-loader打包图片文件时就遇到了以下的问题. 这是我的webpack 处理打包图片相关配置项: ... module: { rules: [ ... { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]', outputPath: '

  • vue+springboot图片上传和显示的示例代码

    一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目.  是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

  • vue页面图片不显示问题解决方案

    vue页面图片不显示问题解决方案

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点preview里面又什么都没有,后面一输入,发现随便输入什么字都是出现的200 解决办法: 在webpack里面配置静态资源的路径 1.找到vue.config.js 2.在module.exports下面的devServer里面添加一个键 contentBase:path.join(_dirname,'s

  • python批量修改图片尺寸,并保存指定路径的实现方法

    如下所示: import os from PIL import Image filename = os.listdir("D:\\Work\\process\\样本处理\\polyu-all-train") base_dir = "D:\\Work\\process\\样本处理\\polyu-all-train\\" new_dir = "D:\\Work\\process\\样本处理\\polyu\\" size_m = 128 size_n

  • Vue+Vant 图片上传加显示的案例

    前端开发想省时间就是要找框架呀!找框架! vant中上传图片组件:https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader: <van-uploader :after-read="onRead" accept="image/*" multiple> <imgclass="head-img" src="/static/images/addpic.png&

  • python matplotlib画图时坐标轴重叠显示不全和图片保存时不完整的问题解决

    python matplotlib画图时坐标轴重叠显示不全和图片保存时不完整的问题解决

    目录 问题 解决方案 保存时图片不完整的问题 补充:使用matplotlib时如何让坐标轴完整显示所有的标签刻度 总结 问题 在使用matplotlib作图的时候,有的时候会遇到画图时坐标轴重叠,显示不全和图片保存时不完整的问题.如下: 解决方案 画图时重叠或者显示不全的问题 画图时加上参数设置tight_layout=True 画完所有子图后,设置plt.tight_layout() # 加上tight_layout=True 参数设置 fig, axes = plt.subplots(nro

  • vue背景图片路径问题及解决

    vue背景图片路径问题及解决

    目录 vue背景图片路径 vue避坑之背景图片路径的添加 vue背景图片路径 共三种情况: <div class="about" :style="{backgroundImage:'url('+pic+')'}"> <div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;bord

  • 关于vue二进制转图片显示问题 后端返回的是byte[]数组

    关于vue二进制转图片显示问题 后端返回的是byte[]数组

    目录 二进制转图片显示 后端返回的是byte[]数组 1.二进制转图片显示问题 2.byte[]数组可显示 关于返回二进制图片的处理 二进制转图片显示 后端返回的是byte[]数组 1.二进制转图片显示问题 代码 lookPreview(this.previewID).then(response => { this.previewUrl = "data:image/jpeg;base64," + response.data; this.previewList.push(this.

随机推荐