vue里面的js引入图片，必须用require

最新推荐文章于 2024-08-03 16:55:55 发布
最新推荐文章于 2024-08-03 16:55:55 发布
阅读量4.6k 收藏 8
点赞数 2
分类专栏： vue vue开发 web前端开发 文章标签： vue js require
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ze1024/article/details/108713082
版权
本文介绍了在Vue项目中，当需要在JavaScript中引入图片时，必须使用`require`方法的场景。通常，Vue组件内直接写入图片路径即可，但某些特定需求下，需借助`require`动态引入图片资源。文章通过示例代码进行说明。
摘要由CSDN通过智能技术生成

vue中js引入图片,须用require引入

一般情况下,我们在vue里面引入图片的话,基本上是这样子写的

     
      <img src="../../assets/logo.png" alt="">

但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require
下面列举例子以供参考

<template>
  <div style="display:flex;">
    <div v-for
最低0.47元/天 解锁文章
ze1024
关注
专栏目录
详解Vue.js中引入图片路径的几种方式
10-16
以下是几种常见的Vue.js中引入图片路径的方法： 1. 相对路径引用：这是最直接和简单的方法。通过使用以点（.）开始的相对路径，如 "./" 或 "../"，在JavaScript中导入资源或者在template/CSS中引用资源。这种引用...
vue require图片_vue的三种图片引入方式
weixin_39782433的博客
12-12 1万+
vue的三种图片引入方式：首先给图片地址绑定变量：在script中设置变量：//方法1：直接将图片引入为模块require imgUrl from "../assets/test.png"//方法2：把imgUrl放在数据中data() {return {imgUrl:require("../assets/test.png")}}补充方法2：(在data数组中保存数据的情况)data()...
在Vue中动态引入图片为什么要用require
song854601134的博客
08-11 1772
动态引入一个图片的时候，它其实是一个变量，webpack会根据v-bind的一个命令去解析SRC后面的值，并不会通过require引入资源的对象。当我们使用require引入一张图片的时候，webpack会将这个图片当成一个模块，并根据配置文件的配置然后进行打包，最终返回一个大包的地址。默认情况下src目录的所有文件都会打包一个新的文件名，然后编译后静态引入的地址就是打包后的静态地址。所以就可以正确的应用到这些资源了。动态的添加图片最会会被编译成一个静态的字符串，然后再浏览器运行中会去项目中查找这个资源，
vue3中图片引入
最新发布
weixin_45580774的博客
08-03 937
说明：vue2项目一般使用vuecli，支持require进行导入，而在vue3中使用了vite不支持使用require进行引入。
vue 中动态引入图片为什么要是 require， 你不知道的那些事
LuckyWinty的博客
02-08 3275
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群作者：你这个年纪怎么睡得着觉https://juejin.cn/post/7159921545144434718相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require？有些小伙伴，可能...
vue中动态引入图片为什么要是require， 你不知道的那些事
sybh的博客
11-01 7688
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
vue中使用图片的两种方式
weixin_61032994的博客
06-30 4135
1.使用require引入 2.使用import引入
vue data引入本地图片的两种方式小结
10-16
在实际开发中，考虑到代码的可读性和模块化，推荐使用`import`语句来引入图片资源。然而，如果图片路径可能需要在运行时动态改变，那么`require()`可能是更好的选择。同时，为了保持代码的整洁，建议将图片导入放在...
require.js+vue开发微信上传图片组件
11-28
使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件，这样每一个组件就是一个 .vue 文件，哪里用上这个组件就引入进来，维护起来确实很爽。然而一直以来项目用的都是require.js，那又想以这样的形式来...
使用require.context完成本地图片批量导入
04-02
将我的博客文章（https://blog.csdn.net/IT_interest/article/details/122973985）中的内容用项目实现出来，功能为：使用webpack中的require.context功能，批量导入本地图片，并且可根据需要支持多格式图片导入。...
解决Vue动态加载本地图片问题
10-16
在Vue.js应用中，动态加载本地图片是一种常见的需求，特别是在处理数据量较大的列表或轮播图等场景。本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试...
vue项目动态引入图片，使用require
慢慢来吧，都会有的。
02-15 2108
require引入图片
Vue项目引入图片的两种场景和三种方式
weixin_50885665的博客
07-28 6700
public目录Bash。
#Vue2篇：vue动态加载图片为什么要用require
...
01-01 1296
src中引入的图片的相对路径或者绝对路径，vue项目通过webpack的devServer运行之后，默认的vue-cli配置下，图片会被打包成name.hash的图片名。用require引入一个图片文件的话，require返回的就是用于引入图片编译的路径。require是node中的一个方法，作用是“引入模块、JSON、本地文件”。
vue引入图片方法(require与import)
qq_35149546的博客
09-27 9608
1.vue的三种图片引入方式 2.vue中的js引入图片，必须require进来 3.Vue js 中 require，import区别？ 4.vue-cli项目中img使用require动态获取图片 5.vue中的js引入图片，必须require进来 ...
vue 通过js引入 图片的方式（解决项目线上图片无法展示的问题）
逆风优雅的博客
03-21 4255
首先将图片都引入，然后导出 import costContent_11 from '../../../assets/img/costContent_11.png' import costContent_12 from '../../../assets/img/costContent_12.png' import costContent_13 from '../../../assets/img/costContent_13.png' import costContent_14 from '../../.
vue的三种图片引入方式
热门推荐
编程菜鸟夜灵的日常...
04-20 17万+
/方法1.使用import将图片引入为模块，然后将其存入data中。//方法2.使用require将imgUrl放在数据里。//方法3.在生命周期函数中设置url变量。然后在script中设置变量。首先给图片地址绑定变量。
vue中require引入图片
05-12
在Vue中，可以使用`require`来引入图片。具体步骤如下： 1. 在Vue组件中，使用`require`来引入图片，例如： ```javascript <template> <div> <img :src="imageSrc" alt="图片"> </div> </template> <script> export default { data() { return { imageSrc: require('@/assets/images/myImage.jpg') } } } </script> ``` 2. 在Vue配置文件`vue.config.js`中，需要配置`url-loader`，以便将图片文件打包到构建后的文件中。例如： ```javascript module.exports = { chainWebpack: config => { // url-loader 配置 config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => { // 修改选项 options.limit = 10240 return options }) } } ``` 这样配置后，在组件中使用`require`引入的图片就能正常显示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值