【vue系列】动态绑定背景图片-本地图片线上图片

最新推荐文章于 2023-07-09 13:35:37 发布
原创 最新推荐文章于 2023-07-09 13:35:37 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

这篇博客展示了如何在JavaScript中设置元素的背景图片，包括图片的URL、重复和大小调整。示例代码使用了`style`属性直接设置CSS样式，并提供了线上和本地图片的用法差异。

本地图片示范

:style="{'background-image': 'url('+bgImg+')','background-repeat': 'no-repeat','background-size': 'cover'}"
js
	 bgImg:require('../../assets/newlogimg.png'),
ps：线上图片可以去掉 require
换肤和动态换背景图
前端技术
08-09 691
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.min.css"> <sty...
后台管理系统之“图片上传” --vue
weixin_30951231的博客
02-15 2374
图片上传（基于vue) 　　相信上传图片是所有系统必备的功能吧，工作中的第一个管理系统就在上传图片的功能上卡顿了一整天。 　　当时用的elementUI组件，但是由于样式和设计图样式差别较大再加上原生相较好理解，便使用了原生实现图片上传功能。 　　菜鸟上路，望多多指点。 图片上传原理（csdn里看到的比较通俗易懂的图片上传原理）　 　　　参考地址：https://blog.csd...
VUE设置本地背景图片
stuild stuil 的博客
04-05 1万+
有个小需求，原本图片是网络的 直接通过这种方式就能调到 如下 min-height: 100vh; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(http://codegen.caihongy.cn/20201223/fa6532cc6f564976872
vue使用backgroundImage属性
weixin_39147099的博客
11-05 7943
Vue项目中设置背景图片 &lt;template&gt; &lt;div class="login-wrap" :style="setBackground"&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data () { return { setBackgro
img动态背景图
海北军
12-11 381
<header class="header" :style="{background: 'url( '+ activeBackground +') center'}"> data () { return { activeBackground: require('../../../assets/images/headLogo1.png') // 不加requ...
vuejs在css样式表里设置背景图background报错（线上环境）
zzz祝晴雨的博客
10-16 1018
解决： 1、在webpack.prod.conf.js文件里output里面添加：publicPath：’./’ 2、在utils.js文件里添加 publicPath:’…/…/’ 3、在config/index.js文件里，添加assetsPublicPath:’./’
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
在Vue CLI 2.x的项目中，我们经常会遇到在CSS样式中引用assets目录下的图片，在本地开发时一切正常，但部署到线上环境时图片无法显示的问题。这主要是因为`config/index.js`文件中`build`对象的`assetsPublicPath`值...
uni-app 使用线上背景图
最新发布
09-14
- 如果图片地址是动态的，可以使用动态绑定样式的方式： ```vue (${imageUrl})` }" class="container"> <!-- 内容 --> export default { data() { return { imageUrl: '...
基于Vue框架的本地生活超市云市场APP设计源码
09-27
该项目采用流行的前端开发框架Vue.js，实现了用户界面的现代化和动态交互。 Vue.js框架之所以受到开发者们的青睐，主要因为它具有轻量级、易上手、组件化的特点，且具备响应式数据绑定、虚拟DOM等高级特性，适合于...
SpringBoot+Vue线上辅导班管理系统源码毕业设计
资源摘要信息:"本资源为一套基于Java技术栈的线上辅导班管理系统开发项目，该系统使用SpringBoot框架作为后端开发，前端采用VUE技术实现，系统后端与前端分离。项目的数据库使用Mysql进行数据存储。该资源不仅提供了...
vue→backgroundImage路径问题(vue里面放背景图片)
JEFF_xieyuzhi的博客
07-04 7934
<template> <div class="role" :style="backgroundImg"> </div> </template> <script> export default{ data(){ return { backgroundImg:{...
窗体的动态背景图
视力的博客
09-17 1967
import java.awt.Graphics; import java.io.IOException; import javax.swing.JFrame; import javax.swing.JPanel; public class Fu extends JPanel{   Le annotationn;   public Fu() throws IOException
vue项目中加入图片和背景图：img、background-image
qq_49097495的博客
07-09 1万+
*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
vue设置background image之后，本地有效，线上看不到图片
youyudexiaowangzi的专栏
05-13 2040
设置背景图本来在css中使用background属性十分简单，但是vue项目经过编译之后图片的url会改变，然后和项目的根地址结合，可能产生出一个不存在的url，导致加载背景图失败 原： .invitationBoard{ width: 3.45rem; height: 1.18rem; background:url('../../../static/images/headBg.png') no-repeat; background-size: 100% 100%; } 为了让url不至于出
vue 动态绑定背景图片
热门推荐
我叫陈小皮。
05-09 5万+
backgroundImage &amp;&amp; 三目运算符 &lt;div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"&gt; &lt;/div&gt; backgroundI...
vue 绑定背景图片、图片
梦寻汝的博客
03-22 379
vue绑定背景图片 最外面的div样式为background-repeat:no-repeat; 不填充 <div class="login-container" :style="{backgroundImage:'url(' + backimg + ')'}"> </div> import backimgone from '@/assets/app19201080.png' //引用图片 data() { return { ...
vue样式中背景图片路径,vue cli 3 –在样式标签中使用背景图片
weixin_39624864的博客
12-20 456
I want to use a svg image from my assets folder in one of my components as a background-image. Here is an example of my component:export default {name: 'component'}.container {height: 40px;width: 40px...
vue动态绑定背景图片
杜鲁阳的博客
04-18 1万+
vue动态绑定背景图片 html代码： <html> <template> <div class="itemBox"> <div class="item" v-for="(ele,i) in goalList" :key="i" :style="{'backgroundImage': 'url(' + ele.bg + ')'}"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值