vue 动态绑定背景图片

最新推荐文章于 2024-07-04 15:23:33 发布

鸡汤辉

最新推荐文章于 2024-07-04 15:23:33 发布

阅读量1.4k

点赞数

文章标签： vue.js 前端 javascript css

本文链接：https://blog.csdn.net/c327127960/article/details/128953128

版权

本文介绍了两种在前端展示图片的方法。一种是动态绑定后台传递的图片URL，通过设置CSS属性实现显示。另一种是加载本地图片，需使用`require`确保图片资源被正确引入。此外，还提到可以在data中存储图片源并进行绑定。

摘要由CSDN通过智能技术生成

分为两种，第一种是动态绑定后台传来的图片，第二种是本地图片
1.绑定后台传来的图片

<div class="img" :style="{backgroundImage: 'url(' + srcImgUrl + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">

2.本地图片注意要使用require

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

3.也可以存在data中

<div :style="{backgroundImage: 'url(' + src + ')', backgroundSize:'contain'}">
   data(){
            return{
              // 这种方式也要使用require
                src: require('../../assets/images/other/002.jog')
            }
        }