项目场景：

项目中根据图片不同的后缀名，展示不同的图片

问题描述

直接给图片的src绑定图片地址，图片不显示，使用 require('图片本地路径' + '地址变量' + '.png') 也不显示

 <img :src="require('@/assets/img/' + item.url + '.png')" alt="" />

原因分析：

vue在DOM中直接引入的图片会被转为base64格式，但是使用变量引入的话，图片不会转为base64，所以不显示

解决方案：

使用require.context实现前端工程化引入文件

require.context(directory, useSubdirectories, regExp)

directory 检索的目录
useSubdirectories : 是否检索子文件夹
regExp: 匹配文件的正则表达式，一般是文件名
mode: 加载模式。同步还是异步

require.context 执行后，返回一个方法 webpackContext，这个方法又返回一个 __webpack_require__ , 这个 __webpack_require__ 相当于require或者import。同时webpackContext还有第二个静态方法 keys与resolve，一个id属性

keys：返回匹配成功模块的名字组成的数组
resolve：接受一个参数request，request为test文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
id：执行环境的id，返回的是一个字符串，只要用在module.hot.accpet,应该是热加载

主要代码

 const images = require.context("@/assets/test", false, /\.png$/);let imageURL = ''images.keys().forEach(key => {const name = path.basename(key, '.png')if (name === 图片后缀名) {imageURL = images(key).default || images(key)}})return imageURL;

vue中使用require动态获取图片地址相关推荐

vue-preview动态获取图片宽高并增加旋转功能
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用第一步:安装 npm i vue-p ...
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
文章目录博客内容介绍 input 全部类型 file 类型属性 accept属性 multiple属性事件监听 css样式更改上传图片文件,获取图片地址 input type file上传文 ...
mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度
这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题最近在开发一个Vue的项 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
正则表达式获取图片地址及超链接
最近有这么个需求,要获取图片中的图片地址及超链接地址,有的图片有超链接,有的图片没有,如: <div id="main"><ul><li>< ...
vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址新的文章链接:vue中使用腾讯地图选择地址(二) ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
思科dhcp服务器动态获取ip地址
项目要求: 某公司共有网管中心.行政部.技术部.三个部门,分别处在一栋大楼中的两个楼层,为了保证公司内部主机始终能够连接Internet,采用双向冗余设计,分别使用路由器R1与路由器R2连接中国电信和 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...

vue中使用require动态获取图片地址