vue3加载动态图片

一、动态加载图片

使用new URL(url, import.meta.url)

<template><div class="home"><img :src="getImageUrl()" alt="" /></div>
</template>
<script lang="ts">
export default {name: 'HomeIndex',setup() {const getImageUrl = () => {// 里面可以根据需求写逻辑return new URL('../assets/img/home/container_bg.png', import.meta.url).href;};return { getImageUrl };},
};
</script>

二、动态加载背景图

2.1 style中设置

<template><divclass="container":style="{background: 'url(' + getAssetsFile(true) + ') no-repeat',backgroundSize: '100% 100%',}"></div>
</template>
<script lang="ts">
export default {name: 'HomeIndex',setup() {const getAssetsFile = (isAlarm: boolean) => {const url = isAlarm? '../assets/img/monitor_alarm_bg.png': '../assets/img/monitor_bg.png';return new URL(url, import.meta.url).href;};return { getAssetsFile };},
};
</script>
<style lang="scss">
.container {width: 300px;height: 100px;
}
</style>

2.2 修改class

<template><div :class="['container', isAlarm ? 'monitor_alarm' : 'monitor_normal']"></div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {name: 'HomeIndex',setup() {const isAlarm = ref(true);const getAssetsFile = (isAlarm: boolean) => {const url = isAlarm? '../assets/img/monitor_alarm_bg.png': '../assets/img/monitor_bg.png';return new URL(url, import.meta.url).href;};return { getAssetsFile, isAlarm };},
};
</script>
<style lang="scss">
.container {width: 300px;height: 100px;
}
.monitor_normal {background: url(@/assets/img/monitor_bg.png) no-repeat;background-size: 100% 100%;
}.monitor_alarm {background: url(@/assets/img/monitor_alarm_bg.png) no-repeat;background-size: 100% 100%;
}
</style>

vue3加载动态图片相关推荐

cocos creator 3.x 精灵不显示、加载动态图片、物理碰撞、人物跟随鼠标移动、碰撞后节点销毁
温馨提醒:即刻转去Unity3d 精灵不显示: 不要在空节点下直接添加组件正确的做法是:在空节点(Node)上右键创建一个精灵才会给看到或者直接拖曳一个图片放到场景编辑器中也可 cocos cre ...
Glide加载动态图片
首先我们先要去依赖一个githup:bumptech:glide:glide:3.7.0包: 1.使用Glide结合列表的样式进行图片加载: 1) 如果使用的是ListView,可以直接在Adapte ...
vue 加载动态图片出错的三种解决方法
由于解析问题,通常直接引用链接,图片会加载失败,通过学习,整理出以下三种解决错误的方法 <template><div class="first"><! ...
c 语言解析png图片文件信息,使用CImage加载PNG图片文件
在MFC开发中,大家很容易用到PNG等流行媒体格式.但是MFC只提供了简单的BMP,ICON等文件的加载.此时,使用CImage将使得图片加载轻松自如. CImage加载导入图片首先加载动态图片进入 ...
Qt 使用QMovie加载gif图片实现动态等待窗口
有时候要进行某项后台处理,但后台处理时间很长,需要提示用户等待,不妨做一个动态等待窗口.具体实现过程如下: 1 自定义窗口类DlgWait (1) 在资源中添加动态的gif图片,记住它的大小. 我添加 ...
vue3：加载本地图片等静态资源
背景在我们用 vue2 + webpack 的时候,加载图片资源是这样用的: <img :src="require('@/assets/test.png')" /> ...
vc6.0中用GDIPlus实现加载动态gif图片（非MFC实现）
今天心情很嗨皮,原因是花了5块钱买了一张刮刮彩,给中了100快,喜悦感可谓是油然而生吧,好了进入正题吧.关于GDI+的介绍在这里就不谈了,总之相比GDI确实方便了太多,比如首先GDI仅仅支持bmp格式 ...
pl.droidsonroids.gif.GifImageView 动态加载gif图片不动的问题
今天由于需求的原因,需要GifImageView 去动态代码加载gif图片,结果平时在XMl里面正常加载的gif图片,动态加载却一动不动,原谅作为渣渣的我平时不怎么去研究gif,查了许久才发现 ,需要 ...
MFC CMFCToolBar静态工具栏和动态工具栏，加载自定义图片（真彩透明）
现在把我最新研究的对CMFCToolBar心得写在这边. 现在介绍两种加载工具栏的方式: 一种是静态加载工具栏,跟普通的加载工具栏一样,只是用了自定义图片. 一种是动态加载工具栏,这个也是需要静态工具 ...

vue3加载动态图片

vue3加载动态图片

一、动态加载图片

二、动态加载背景图

2.1 style中设置

2.2 修改class

vue3加载动态图片相关推荐

最新文章

热门文章