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

更新时间：2023年06月05日 17:12:31 作者：全蛋

这篇文章主要介绍了vue中使用require动态获取图片地址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

使用require动态获取图片地址

项目场景

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

问题描述

直接给图片的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里，require路径上无法使用变量(会因找不到上下文环境而查找失败)，报依赖错误，可通过require.context()解决。

变量在路径上，require找不到上下文环境：

// 错误
require("../assets/image/" + 变量 + "/img.jpg")

变量是最后的文件名或部分文件名，上下文环境找的到可以：

// 正确
require("../assets/image/ipad/" + "变量.jpg")
require("../assets/image/ipad/i" + "变量.jpg")
require("../assets/image/ipad/img" + "变量.jpg")
require("../assets/image/ipad/img.jpg")

require.context()

传入三个参数分别对应：

context = require.context("../assets/image/ipad/", true, /\.(png|jpg)$/);
// 相当于"../assets/image/ipad/img.jpg"
context("./img.jpg");
//指定上下文环境后，路径上可用变量
// "../assets/image/ipad/" + 变量 + "/img.jpg"
context("./"+"变量"+"img.jpg");

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

10个Vue3性能优化的实用技巧分享
这篇文章总结了10个Vue3中最容易被忽略,但对性能提升最有效的实战技巧,适合新老开发者收藏使用,文中的示例代码讲解详细,感兴趣的小编好可以了解下
2026-01-01
Vue3中的defineExpose函数用法深入解析
这篇文章主要介绍了Vue3中的defineExpose函数用法的相关资料,defineExpose是Vue3中用于在模式下暴露组件内部属性和方法的辅助函数,它允许父组件通过ref访问子组件的暴露内容,提高组件间的交互能力并保持封装性,需要的朋友可以参考下
2025-01-01
Vue新手指南之创建第一个vue-cli脚手架程序
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下
2021-05-05
vue.js前后端数据交互之提交数据操作详解
这篇文章主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
2018-04-04
vue实现动态路由的方法及路由原理解析
这篇文章主要介绍了路由原理及vue实现动态路由,Vue Router 提供了丰富的 API，可以轻松地实现路由功能，并支持路由参数、查询参数、命名路由、嵌套路由等功能，可以满足不同应用程序的需求，需要的朋友可以参考下
2023-06-06
vue+element-ui表格自定义列模版的实现
本文主要介绍了vue+element-ui表格自定义列模版的实现,通过插槽完美解决了element-ui表格自定义列模版的问题,具有一定的参考价值,感兴趣的可以了解一下
2024-05-05
preload对比prefetch的功能区别详解
这篇文章主要为大家介绍了preload对比prefetch的使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
用Cordova打包Vue项目的方法步骤
这篇文章主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
Vue2 响应式系统之深度响应
这篇文章主要介绍了Vue2 响应式系统之深度响应，文章基于Vue2 响应式系统的相关资料展开对Vue2 深度响应的介绍，需要的小伙伴可以参考一下
2022-04-04
Vue中引入使用patch-package为依赖打补丁问题
这篇文章主要介绍了Vue中引入使用patch-package为依赖打补丁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03