vue如何动态加载显示本地图片资源

最新推荐文章于 2024-08-02 19:19:16 发布
最新推荐文章于 2024-08-02 19:19:16 发布
阅读量1.2k 收藏 3
点赞数 2
分类专栏： 学习笔记 文章标签： vue.js 前端 javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44312227/article/details/136216785
版权
本文讨论了在开发中如何根据变量动态显示图片，重点关注了Webpack和Vite两种构建工具的不同实现方式，以及为何在Vite项目中不能使用require进行资源引入，因为Vite基于ESModules模块规范，不支持commentJS的require语法。
摘要由CSDN通过智能技术生成

在实际开发中，根据某一个变量动态展示图片的情况有很多。实现方法分打包构建工具的差异而不同。
1、webpack的项目
require引入图片资源
在这里插入图片描述
2、vite的项目
new URL(url,base).href
在这里插入图片描述

疑问解答：为什么vite项目不可以用require？
原因在于，vite的模块化规范是ES Modules,所以vite项目在打包构建时无法解析require（commentJS规范里引入资源的语法）引入资源的方式。

小朱爱开发
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
基于vue 动态加载图片src的解决方法
08-28
下面小编就为大家分享一篇基于vue 动态加载图片src的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3中vite 加载本地图片或动态加载图片
最新发布
qq_39016177的博客
08-02 486
vue3中vite 加载本地图片或动态加载图片
【Vue】本地图片展示的六种解决方案
学无止境
06-26 3825
【Vue】本地图片展示的六种解决方案
动态加载图片
ha_ha_en的博客
06-01 2955
在前端，模块的引入默认是不支持全动态引入的（即：require(变量)），支持半动态引入（即：require(静态路径+动态变量路径)）今天有个需求是从后台查询出图片的相对路径，然后遍历写入到网页结构中实现图片的动态展示。3.require使用及注意事项。1.相对路径和绝对路径、根目录。2.vue页面加载图片的原理。
vue 展示本地图片三种方法
josiecici的博客
08-07 2万+
第一种:直接写 两个都可以 如果@配置了的话 <img src="../assets/img/mapchange/map1.png" alt=""> <img src="@/assets/img/mapchange/map1.png" alt=""> 第二种:import 然后在data内定义后 src绑定 第三种：data内 require(’ 地址路径’) src直接绑定 ...
vue如何动态加载本地图片
m0_49789433的博客
01-25 7964
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正 今天遇到一个在vue文件中引入本地图片的问题，于是有了这篇文章。 通常，我们的一个img标签在html中是这么写的： <imgsrc="../images/demo.png"> 这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。 如果src是变量的话，我们一般会在data中定一个变量s...
解决Vue动态加载本地图片问题
10-16
在Vue.js应用中，动态加载本地图片是一种常见的需求，特别是在处理数据量较大的列表或轮播图等场景。本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
具体到Vue项目，当图片资源的路径通过动态绑定到src属性时，由于请求被转发到了后端服务器，而图片实际上位于前端静态资源目录中，造成后端服务器返回404错误。在实际开发中，我们通常会使用Webpack工具来打包静态...
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
vue src动态加载请求获取图片的方法
10-17
本篇文章将详细讲解如何在Vue中通过`src`属性动态加载本地图片和请求获取的图片。 一、加载本地图片 1. **图片目录结构**： 通常，我们会在项目的`src/assets`目录下存放项目中的静态资源，包括图片。例如，你...
vue中动态引入图片
qq_41742576的博客
02-29 2223
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
在vue3-vite项目中，实现动态加载本地照片
weixin_55325334的博客
04-17 5135
1. 动态照片的渲染，在vite中，不能直接通过:src="item.image"的方式获取到照片， 2. 封装getAssetURL()函数，实现动态加载照片
在Vue 3中加载本地图片和其他静态资源
码农键盘上的梦
02-23 8656
以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。首先，确保你已经安装了file-loader或url-loader插件。首先，确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具，也可以使用ES6的。例如，如果图片位于与组件相同的目录下，可以使用。函数将图片作为模块导入，然后在组件中使用它。目录下，然后使用绝对路径来引用它们。
vue中展示本地图片
reembarkation的博客
07-22 2530
vue项目中，使用本地图片
Vue项目引入图片的两种场景和三种方式
weixin_50885665的博客
07-28 6639
public目录Bash。
vue3 中如何动态加载本地图片资源
weixin_44536001的博客
05-30 4518
在untils文件中加入getImageUrl方法。在需要动态加载的vue文件中引入使用。
Vue显示图片的几种方式
热门推荐
见证自己学习,成长的记录
02-05 2万+
最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。头像这一栏空荡荡的，我这种强迫症患者难受死！首先声明下，我的数据列表是查询数据库接口返回的，那么我头像路径也是保存在数据库的：我先去网上随便搜了点图片入库里面，先让他能正常展示着，后面有空了再改为通过接口动态上传展示。
vue图片显示
babyzbb636的博客
10-03 3841
最简单的方法是使用<img>标签，并将图片的URL作为src属性的值。如果是绝对路径，需要使用require函数，图片将从提供的URL加载并显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值