vue中动态引入图片地址需要用require

最新推荐文章于 2024-07-02 15:44:30 发布
最新推荐文章于 2024-07-02 15:44:30 发布
阅读量565 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44799030/article/details/138073488
版权

如果icon的地址是相对于项目根目录的路径,
动态引入图片地址时需要添加require()

动态生成menu

            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                     :collapse="isCollapse">
                <el-menu-item :index="mindex+1" v-for="(mitem,mindex) in menuList" :key="mindex">
                    <img :src="mitem.icon" alt="">
                    <span slot="title">{{mitem.name}}</span>
                </el-menu-item>
            </el-menu>

menuList

menuList:[
    {name:'数据概览',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'数据引接',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'数据检索',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'数据重组',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
    {name:'系统管理',icon:require('@/assets/img/global/menu11.png'),iconActive:require('@/assets/img/global/menu12.png')},
]
胆小鬼゛
关注
vue 动态引入图片 —require()
weixin_48596030的博客
05-30 5066
vue 动态引入图片 —require()
vue中动态引入图片为什么要是require， 你不知道的那些事
sybh的博客
11-01 7688
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题
热门推荐
weixin_45768768的博客
12-28 5万+
Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较
前端require（）动态添加图片
vhgvhbj的博客
03-28 311
需求：工作中突然需要我动态配置项目登录页的背景图片，于是我直接使用了require，可是需求稍微有点不一样，用后端存放我们的前端本地的图片地址，通过接口获取，然后再动态配置。这里的require我尝试了很多方式，请不要怀疑是格式问题。看上去好像区别不大，搞了一下午，查阅大量资料，错误演示通过变量赋值 直接报错。
vue require 图片动态地址_Vue 之引入图片
weixin_39687881的博客
11-25 1672
阅读本文约需要5分钟大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了Vue 之is的作用和用法的知识，今天跟大家分享下Vue 之引入图片的知识。1Vue 之引入图片参考文献：http://www.fly63.com/article/detial/1797?type=3‍需求：如何components里面的inde...
动态引入图片为什么要加require？
weixin_49021723的博客
05-19 1386
答：因为动态添加src被当做静态资源处理了，而静态资源是会webpack编译的，不加require的src是不会编译src里的地址，而assets里的图片经过wabpack编译为dist后，地址已经变了，所以引入地址，资源地址在编译后对不上了。
vue图片地址动态绑定
qq_42594589的博客
04-28 296
vue 动态绑定图片地址不显示问题 当在给数据 设置绝对路径或者是相对路径时应该使用require引入才能成功 eg: ( this. MyimgSrc = require(‘…/…/assets/jd/market/img/temp/icon_yj.png’) )
Vue 为图片赋值动态地址
asing1elife's blog
10-18 3048
Vue 的 的 src 属性在赋值时，如果是静态内容可以直接指定，但动态内容则不行 更多精彩 更多技术博客，请移步 asing1elife’s blog 静态指定的方式 一般静态指定时，会将图片放在相同路径下，然后通过绝对路径进行指定 &amp;lt;mt-header fixed&amp;gt; &amp;lt;img class=&quot;logo&quot; src=&quot;./images/logo.
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
imageUrl: require('@/assets/images/default.png') // 使用require引入图片 } }) ``` `require`关键字在这里的作用是确保图片资源在编译时就被解析为正确的URL，而不是在运行时被当作字符串处理。`@/assets/...
解决Vue动态加载本地图片问题
10-16
本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试使用`v-bind`（简写为`: `）动态绑定`img`标签的`src`属性时，图片无法正常显示。原因是浏览器没有...
vue里面的js引入图片，必须用require
ze1024的博客
09-21 4666
vue中js引入图片,须用require引入 一般情况下,我们在vue里面引入图片的话,基本上是这样子写的 <img src="../../assets/logo.png" alt=""> 但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require 下面列举例子以供参考 <template> <div style="display:flex;"> <div v-for="it
vue3 动态获取图片地址
sj18838107211的博客
04-09 754
vue3 动态获取图片地址
在Vue中动态引入图片为什么要用require
song854601134的博客
08-11 1772
动态引入一个图片的时候，它其实是一个变量，webpack会根据v-bind的一个命令去解析SRC后面的值，并不会通过require引入资源的对象。当我们使用require引入一张图片的时候，webpack会将这个图片当成一个模块，并根据配置文件的配置然后进行打包，最终返回一个大包的地址。默认情况下src目录的所有文件都会打包一个新的文件名，然后编译后静态引入的地址就是打包后的静态地址。所以就可以正确的应用到这些资源了。动态的添加图片最会会被编译成一个静态的字符串，然后再浏览器运行中会去项目中查找这个资源，
vue动态加载图片
weixin_43829545的博客
04-10 789
1.如果你的图片在本地文件common文件下： 在页面中<img src="…/…/assets/common/bg.jpg",> 动态载入时： ：src={{imgsrc}} imgsrc:require（’…/…/assets/common/bg.jpg’）(require必须写) 2。移动你的图片static下 img：‘ ./stalic/arrow0.png,’ ...
vue项目中通过require引入静态图片路径
weixin_46125684的博客
12-01 1987
vue项目中通过require引入静态图片路径
vue 动态引入图片地址的方法
weixin_44383533的博客
07-11 826
我们直接使用 v-bind 的方式导入无法正常导入是因为 页面显示为html+css+js而vue变成我们可以看到的样子是需要打包变成html+css+js的，在打包过程中将item.src的变量 取出变成/image/icon.svg只是 将地址过去当作静态资源了 然而在我们运行的127.0.0.1 的本机地址并没有image/icon.svg的资源所以无法使用通过require方法这reuire方法动态加载地址。
vue项目动态引入图片，使用require
慢慢来吧，都会有的。
02-15 2108
require引入图片
Vue 动态绑定图片地址，使用require也失效问题解决方案
TurtleOrange的博客
09-15 3093
解决Vue中，使用require显示图片失效问题
Vue循环动态获取图片的URL
最新发布
qq_54855933的博客
07-02 622
如果你在Vue CLI项目中，并且图片存储在src/assets目录下，你应该使用Webpack的别名@来引用它们。：你可以使用require或import在JavaScript中导入图片，并将结果存储在data中。'@/assets/images/FlightInspection/工作台.png''@/assets/images/FlightInspection/大屏板.png''@/assets/images/FlightInspection/小程序.png'
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、付费专栏及课程。

余额充值