vue动态绑定图片和背景图

最新推荐文章于 2024-07-09 14:37:50 发布

转载最新推荐文章于 2024-07-09 14:37:50 发布 · 528 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016340129

文章标签：

#javascript #ViewUI

本文介绍了如何在前端开发中实现动态图片和背景图的绑定，通过使用require函数结合路径来实现不同条件下的图片加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、动态绑定图片

<img class="binding-img" :src="require('../assets/images/test.png')" />

2、动态绑定背景图

<div class="binding-bg" :style="{ 'background': 'url(' + require('../assets/images/'+bgDef) + ') no-repeat center center', 'background-size': '100% 100%'}">

<div class="binding-bg" :style="{ background: 'url(' + require('../assets/images/'+ testBg ? testBg : bgDef) + ') no-repeat center center', backgroundSize: '100% 100%'}">