vue中动态引入图片为什么要是require，不用会怎么样

最新推荐文章于 2023-08-11 16:18:24 发布
最新推荐文章于 2023-08-11 16:18:24 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： webpack 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuj1935/article/details/129199329
版权
vue中动态引入图片为什么要是require，不用会怎么样：
  1. src引入的资源是静态引入时，vue会自动编译解析src的资源，因此打包过后的图片地址和资源地址一致，图片可显示；
  2. 使用v-bind引入src资源时，src时作为动态资源引入的，使用时需要使用打包编译后的路径，动态打包地址和默认打包地址不一致，访问不到图片地址。

解决： 使用require将资源当成一个模块处理，此时会根据webpack配置进行打包并返回结果

前端酱紫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
require引入js vue_vue中的js引入图片，必须require进来
weixin_39929465的博客
12-20 1038
需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。1.在img标签里面直接写上路径：2.利用数组保存再循环输出： {{ item.title }}data: () => ({carouselData:[{url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},{url:require('...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
imageUrl: require('@/assets/images/default.png') // 使用require引入图片 } }) ``` `require`关键字在这里的作用是确保图片资源在编译时就被解析为正确的URL，而不是在运行时被当作字符串处理。`@/assets/...
基于vue 动态加载图片src的解决方法
08-28
下面小编就为大家分享一篇基于vue 动态加载图片src的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vue中动态引入图片为什么要用require
最新发布
song854601134的博客
08-11 1623
动态引入一个图片的时候，它其实是一个变量，webpack会根据v-bind的一个命令去解析SRC后面的值，并不会通过require引入资源的对象。当我们使用require引入一张图片的时候，webpack会将这个图片当成一个模块，并根据配置文件的配置然后进行打包，最终返回一个大包的地址。默认情况下src目录的所有文件都会打包一个新的文件名，然后编译后静态引入的地址就是打包后的静态地址。所以就可以正确的应用到这些资源了。动态的添加图片最会会被编译成一个静态的字符串，然后再浏览器运行中会去项目中查找这个资源，
【 在vue中动态的引入图片为什么要使用require？】
weixin_44420339的博客
02-06 252
动态添加的src，编译过后的文件地址和被编译过后的资源文件地址不一致，从而无法正确引入资源。而使用require，返回的就是资源文件被编译后的文件地址，从而可以正确的引入资源
vue中引入图片为什么使用require
qq_42931285的博客
07-12 6357
require、vue中引入图片
vue中动态引入图片为什么要是require， 你不知道的那些事
时清云的博客
11-04 1506
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
在 Vue 中为什么非要用 requier 的方法才能引入图片？
Wayne8016的博客
02-22 2125
因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，而不是直接以字符串的形式。 node编程中最重要的思想就是模块化，import和require都是被模块化所使用。 遵循规范 require是 AMD 规范引入方式 import是 ES6 的一个新的语法标准，如果要兼容浏览器的话必须转化成 ES5 的语法 调用时间 require 是在...
解决Vue动态加载本地图片问题
10-16
在Vue.js应用中，动态加载本地图片是一种常见的需求，特别是在处理数据量较大的列表或轮播图等场景。本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试...
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
vue src动态加载请求获取图片的方法
10-17
在`data`选项中定义图片路径，这里我们使用`require`关键字来引入图片。例如： ```javascript data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, ...
vue导入图片必须要 require 哦
dazhongliu666的博客
05-26 691
在 vue 中导入图片，通过 webpack 的 devServer 运行之后，图片的路径会发生改变，踩了坑，图片地址正确却一直加载不出来。 这是因为图片会被打包成 name.hash 的格式，需要使用 require('图片地址') 的方式，才能正确访问图片，它会返回 npm 运行之后的编译地址。 ...
VUE内的JS在引用图片时为什么要require
xzj0197的博客
02-16 2136
VUE内的JS在引用图片时为什么要require
vue中的图片需要用require的方式进行引入
weixin_45172119的博客
08-23 2291
在vue中，我们有时候通过动态的方式加载图片，需要require的方式进行引入图片。 html <image :src="rightIcon" mode=""></image> //图片 <view class="tab" :style="tabSrc">背景图片</view> js 图片image export default { data(){ return(){ rightIcon: require("
#Vue2篇：vue动态加载图片为什么要用require
...
01-01 1168
src中引入的图片的相对路径或者绝对路径，vue项目通过webpack的devServer运行之后，默认的vue-cli配置下，图片会被打包成name.hash的图片名。用require引入一个图片文件的话，require返回的就是用于引入图片编译的路径。require是node中的一个方法，作用是“引入模块、JSON、本地文件”。
动态引入图片为什么要加require？
weixin_49021723的博客
05-19 1016
答：因为动态添加src被当做静态资源处理了，而静态资源是会webpack编译的，不加require的src是不会编译src里的地址，而assets里的图片经过wabpack编译为dist后，地址已经变了，所以引入地址，资源地址在编译后对不上了。
vue中动态绑定图片，无法显示问题。 require，以及使用require的原因.vue引用磁盘(本机，桌面图片)，绝对路径
F_fengzilin的博客
05-02 3389
文章目录#1.在使用vue加载普通静态图片时，可以直接使用相对路径#2.在使用vue动态加载图片时，必须使用require，#3..vue引用磁盘(本机，桌面图片)，绝对路径解决办法：将你需要的图片，添加到项目文件夹的static文件下，使用局部引入的方式进行引用。即可 #1.在使用vue加载普通静态图片时，可以直接使用相对路径 例如：<img src="../../static/logo.png" alt="" style="width:200px; height:100px"> 显示效果如下
vue3 v-for动态循环本地图片，不能使用require
weixin_57925162的博客
05-04 834
require 是属于 Webpack 的方法,在v3+vite的项目里面并不适用，详情请看vite文档。方法来实现渲染动态渲染本地图片。这里使用vite官网文档的。
vuex中使用require.context动态引入模块
fawzia的博客
06-08 383
前端使用webpack的require.context函数自动引入模块，在vuex中的使用。
vue中require引入图片
05-12
在Vue中，可以使用`require`来引入图片。具体步骤如下： 1. 在Vue组件中，使用`require`来引入图片，例如： ```javascript 图片"> export default { data() { return { imageSrc: require('@/assets/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值