vue 动态引入图片 —require()

最新推荐文章于 2025-06-13 13:28:58 发布
最新推荐文章于 2025-06-13 13:28:58 发布
阅读量5.2k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48596030/article/details/125041680

在vue中动态引入图片：用 require()

在静态代码中是这样写的：

<img src="../../assets/imgs/bankimg.png" />

动态引入是这样的：

<img :src=
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue中动态引入图片为什么要是require， 你不知道的那些事
sybh的博客
11-01 8207
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
【Vue3+Ts】动态引入图片路径/require引入错误
cnsv的博客
02-06 1155
【Vue3+Ts】动态引入图片路径/require引入错误
vue中的require
个人博客
07-31 1万+
require 是 node 中的一个方法，他的作用是 用于引入模块、 JSON、或本地静态文件。require会在编译过程中被执行，最终会得到对应文件的内容（例如json文件）或者是文件编译后的目录路径（例如图片文件，当然如果图片大小小于一定值，会被直接转换为base64编码，具体配置参考vue-cli）。因为在js中直接使用字符串路径时，编译后也会使用当前字符串路径引入，而编译后的图片路径并不一定是图片存放的目录路径。可以遍历文件夹的文件，从中获取指定文件，自动导入模块。获取引入的所有文件的key，
vue3动态导入图片
最新发布
weixin_46664234的博客
06-13 783
vue3动态导入图片
vue项目动态引入图片，使用require
慢慢来吧，都会有的。
02-15 2235
require引入图片
在Vue中动态引入资源为什么要用require
song854601134的博客
08-11 2161
动态引入一个图片的时候，它其实是一个变量，webpack会根据v-bind的一个命令去解析SRC后面的值，并不会通过require引入资源的对象。当我们使用require引入一张图片的时候，webpack会将这个图片当成一个模块，并根据配置文件的配置然后进行打包，最终返回一个大包的地址。默认情况下src目录的所有文件都会打包一个新的文件名，然后编译后静态引入的地址就是打包后的静态地址。所以就可以正确的应用到这些资源了。动态的添加图片最会会被编译成一个静态的字符串，然后再浏览器运行中会去项目中查找这个资源，
vue中引入图片为什么使用require
qq_42931285的博客
07-12 6653
require、vue中引入图片
解决Vue动态加载本地图片问题
10-16
**解决方案二：使用require动态加载** 对于图片数量较多的情况，我们可以使用`require`函数动态加载图片。`require`可以在运行时根据条件加载模块，因此适合处理动态数据。例如： ```javascript export default { ...
基于vue 动态加载图片src的解决方法
08-28
基于vue 动态加载图片src的解决方法 一、 Vue 中的动态加载图片src问题 在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...
vue动态加载图片
weixin_42429288的1博客
12-26 725
vue中加载图片不能直接动态改变图片地址，这样地址会被识别为字符串，需要使用require引入 转载自参考大佬
vue中动态引入图片
不可云
02-29 3059
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
requirejs加载vue
04-10
解决requirejs加载vue问题； 解决Vue解析模板闪烁问题； 其它坑
vue 中动态引入图片为什么要是 require， 你不知道的那些事
LuckyWinty的博客
02-08 3428
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群作者：你这个年纪怎么睡得着觉https://juejin.cn/post/7159921545144434718相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require？有些小伙伴，可能...
vue 项目中 img 标签使用 require 动态获取图片展示
热门推荐
Y_Cfeng的博客
06-21 1万+
今天做图片渲染模块时，发现img的拼接都忘了，发现怎么拼都不能实现，所以就查了下资料发现，要使用require,具体就看下面 这里在motheds 中定义了个方法获取 这样就可以了。。。。。 ...
vue项目优化 --- 按需加载组件（require-resure）
dandan_feifei的博客
05-22 7113
对于大型的web应用来说，打包构建项目时，将所有的代码文件压缩成一个文件是不合适的，在部分代码文件只有在特殊情况下才被需要的情况下无疑是一种浪费。webpack提供了将代码文件分块的能力。 这里需要注意的是：webpack并不是把原来的一个大文件，简单的进行拆分，而是在这个基础上，提供了按需加载特定模块的能力。这样使得应用在最初加载代码量可以尽量的小。之前我们的做法：router/index.js
vue里面的js引入图片，必须用require
qq_30351747的博客
11-29 3428
vue里面的js引入图片，必须用require vue中js引入图片,须用require引入 一般情况下,我们在vue里面引入图片的话,基本上是这样子写的 <img src="../../assets/logo.png" alt=""> 但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require 下面列举例子以供参考 <template> <div style="display:flex;"> <div v-fo
vue中img的src动态赋值（require方法）
qq_45991812的博客
02-06 1万+
【代码】vue中img的src动态赋值（require方法）
vue3 require引入图片
01-16
### 如何在 Vue 3 中使用 `require` 引入图片 在 Vue 3 中，为了动态加载资源路径，通常会使用 Webpack 的 `require` 函数来处理静态资产。这种方式允许开发者通过模块请求的方式获取文件路径。 对于图片这类静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值