vue3中vite 加载本地图片或动态加载图片

qq_39016177

于 2024-08-02 19:19:16 发布

阅读量181

点赞数 4

文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_39016177/article/details/140878398

版权

vue3中vite 加载本地图片或动态加载图片

1.先看官网

标红处即为示例
在这里插入图片描述

2.具体示例

js示例

// vue3+vite   实现动态加载图片
const requireImg = (path: string) => {
    return new URL(`${path}`, import.meta.url).href
}

标签示例

<embed width="100%"
 height=500px 
 :src="requireImg('../assets/cognize/cs.pdf')">
</embed>

3.总结

标签中这样写是不是有种vue2的错觉–哈哈
在这里插入图片描述
诸君有用且点赞

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_39016177

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3中vite 加载本地图片或动态加载图片

vue3中vite 加载本地图片或动态加载图片
复制链接

扫一扫

vite+vue3动态模块化导入并使用pinia

03-25

通过这样的结构，开发者可以在Vue3和Vite的现代化开发环境中充分利用Pinia进行状态管理，实现动态模块化的加载，提升应用的性能和可维护性。这种技术组合不仅简化了代码结构，也提高了开发效率。

vite5+vue3+ import.meta.glob动态导入vue组件

03-25

在现代前端开发中，Vue3 和 Vite5 的结合提供了高效、快速的开发体验。Vite 是由 Vue.js 作者尤雨溪开发的一款新型构建工具，它利用了 ES 模块的原生加载能力，实现了热更新和按需编译，极大地提升了开发效率。Vue3 ...

参与评论您还未登录，请先登录后发表或查看评论

【vue3】vite 动态加载图片

橙子的博客

12-06

459

vue3动态加载图片

Vue3的vite中图片的动态加载

yiyueqinghui的博客

01-04

5593

【代码】Vue3的vite中图片的动态加载。

在vue3-vite项目中，实现动态加载本地照片

weixin_55325334的博客

04-17

5024

1. 动态照片的渲染，在vite中，不能直接通过:src="item.image"的方式获取到照片， 2. 封装getAssetURL()函数，实现动态加载照片

vue3+vite动态遍历加载图片

陈新科的博客

04-02

1676

<div class="header-menu-list flex ac" v-for="(item, i) in header" :key="item.title" > <div class="header-img"> <img :src="getimg(i)" alt="" /> </div> </div> <script..

vue3 + vite引入本地图片

pscool的博客

06-24

5586

/ 打印的是： /src/assets/imgs/cover.png。

vue3 vite版本引入本地静态图片的方式

热门推荐

xiexikk的博客

01-28

1万+

vue3引入本地静态图片

vue3+vite动态引入图片

jquerybootstrap的博客

03-06

592

解决vue3+vite动态引入图片，打包后找不到资源问题。

vue3+vite：动态引入静态图片资源

qq_45796592的博客

06-13

2073

vite不支持require方法；vue3+vite如何动态引入静态图片资源

Vue 3+vite 动态引入本地图片img

简单Cere

02-01

908

Vue3动态换图，换壳思路

vite vue3 import.meta.glob动态路由

03-29

在Vite与Vue 3的结合中，`import.meta.glob`是一个强大的特性，可以让我们动态地加载和注册路由模块，使得路由配置更加灵活和可扩展。首先，我们来了解`import.meta.glob`。这是Vite提供的一种元数据API，它可以...

vue3+vite+openlayers6实现绘制扇形及环形组件代码

08-05

在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形适合人群：具备一定编程基础，...

vue动态加载外部依赖js代码实现

11-19

在前端开发中，有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时，可能会遇到需要按需加载某些功能的情况，例如第三方库、API接口等。本文将详细介绍如何通过创建一个Vue组件来...

【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

bbt953的博客

07-24

519

记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

供应链与生产制造L1-L4级高阶流程规划框架.pptx

最新发布

08-01

供应链与生产制造L1-L4级高阶流程规划框架.pptx

蓝牙BLE 4.0开发课程

08-01

蓝牙BLE 4.0课程

chromedriver-mac-x64_127.0.6493.0.zip

08-01

chromedriver-mac-x64_127.0.6493.0.zip

vue3+vite4 如何动态使用本地图片

04-01

在Vue3中，可以使用`require()`函数动态引入本地图片： ```vue <template> <div> <img :src="image1" alt=""> <img :src="image2" alt=""> </div> </template> <script> export default { data() { return { image1: null, image2: null } }, mounted() { // 引入本地图片 this.image1 = require('@/assets/image1.jpg') this.image2 = require('@/assets/image2.jpg') } } </script> ``` 在上面的例子中，我们通过`require()`函数动态引入了两张本地图片，并将其赋值给了`image1`和`image2`变量。在模板中，我们使用`<img>`标签来显示这些图片，属性`src`的值绑定到对应的变量即可。需要注意的是，`require()`函数只能在模块的顶层作用域中使用。如果需要在函数或条件语句中引入图片，可以使用`import()`函数动态加载模块，再使用`default`属性获取模块的默认导出。 ```vue <template> <div> <img :src="image" alt=""> </div> </template> <script> export default { data() { return { image: null } }, mounted() { // 动态引入本地图片 import('@/assets/image.jpg').then(module => { this.image = module.default }) } } </script> ``` 在上面的例子中，我们使用`import()`函数动态引入了一张本地图片，并将其赋值给了`image`变量。需要注意的是，`import()`函数返回一个Promise，需要通过`.then()`方法获取模块的默认导出。