vue中使用行内式写背景图

凡小多

已于 2024-07-10 11:21:33 修改

阅读量6.2k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

于 2022-04-22 16:21:09 首次发布

本文链接：https://blog.youkuaiyun.com/wgh4318/article/details/124348668

vue 专栏收录该内容

76 篇文章

订阅专栏

本文探讨了如何在HTML中正确使用行内式背景图片，对比了直接写URL与通过变量引用的差异，并提供了两种有效的方法。解决实践中遇到的编码问题，提升代码灵活性。

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

首先一般的行内式和背景图的行内式不同

// 没有效果
<div :style=" background: url(../img.jpg);"></div>

解决方法：

  <div :style="{ 'background': 'url('+require('../img.jpg')+')'}"></div>
或
<!-- backgroundImg 是变量(图片地址) -->
<div :style="{ 'background': `url(${backgroundImg})`}"></div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

凡小多

关注关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue设置背景图片

easyJob

08-28

735

一、参考来源：（1）https://www.cnblogs.com/qxxblogs/p/12388482.html （2）https://blog.51cto.com/u_11462036/2793900 二、应用代码如下 <template> <div> <div class="back" > <img :src="imgSrc" width="100%" height="100%" alt="background-pictur.

vue中动态绑定行内样式style的backgroundImage

lu2925028830的博客

04-18

4128

vue中动态绑定行内样式之backgroundImage

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

Vue项目中设置背景图片方法

08-28

下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue 动态绑定行内样式（style）简单讲解

最新发布

全局可见

06-11

511

数组语法[样式对象1, 样式对象2]→ 适合组合多组样式。对象语法{ 属性: 值 }→ 适合精准控制单个样式。

vue行内样式里面写背景图片不显示

我不想说

11-23

6074

vue中图片放在assets里面，比如某张图片做div背景图 <div style="width:200px;height:100px;background:url(../../assets/cardbg.png)"> 这么写图片不显示出来，以为是图片路径的问题，但是放在img标签里面又是正常的 <img src="../../assets/cardbg.png"/> ...

vue中利用行内样式动态设置背景图background-image不显示的问题

nana18874597151的博客

12-28

4315

所以这才导致找不到访问图片的路径，所以不显示，所以在vue中动态设置背景图片的时候，我们需要使用。当我们打开调试工具的时候会发现，第一个和第三个的样式如下图所示。运行之后我们会发现，带有@的路径都没有显示。我们发现在样式表里面设置的 @ 又是可以的。发现浏览器解析出来的路径仍为。

关于vue项目行内式添加背景图片的可行方案

m0_57005111的博客

07-05

1381

避免采坑

Vue项目解决行内添加背景图片无法显示的问题

ssxx_zzyy_baba的博客

01-23

1034

确保 require('@/assets/images/background.jpg')使用字符串拼接，我们将背景图片的路径作为模块导入。废话不多说，直接上代码。绑定将行内样式应用到。

vue 动态绑定背景图片的方法

10-18

使用Vue框架，开发者可以很轻松地实现动态绑定背景图片的效果。Vue中的动态绑定主要依赖于数据绑定和指令系统，而v-bind指令是用于动态绑定HTML属性的一种方法。通过v-bind指令，我们可以将一个JavaScript表达式的值...

解决vuejs项目里css引用背景图片不能显示的问题

10-18

在Vue.js项目中，开发过程中可能会遇到CSS引用的背景图片无法正常显示的问题。这通常是由于资源路径不正确或Webpack配置不完善导致的。本篇文章将详细介绍如何解决这一问题。首先，我们要理解Vue.js项目的文件结构...

vue行内动态添加背景图

09-23

在Vue中，你可以使用v-bind指令来动态绑定行内样式。要添加背景图片，你可以使用background-image属性，并将其值设置为图片的URL。以下是一个示例代码： (' + imageUrl + ')'}">  export ...

Vue中如何设置背景图片

duansamve的博客

04-21

4942

在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式： background:url("../../assets/left-bg.jpg"); 这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题，方法如下：在data中定义如下：...

Vue项目中设置背景图片

热门推荐

woyidingshijingcheng的博客

06-07

8万+

在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式：background:url("../../assets/head.jpg");这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题： 1》在data中定义如下： export defa

vue项目中背景图片写成行内样式不显示

qq_43470106的博客

05-07

1977

今天写代码的时候发现把背景图片写在行内样式中没法显示 <div class="template-card" style="background-image:url(../images/B5.jpg);"> 在检查的时候发现在网页中可以看到元素上已经有了这个样式，但是却没有生效。解决方法:修改代码为： <div class="template-card" :style="{ 'background': 'url(' + require('../images/B5.png') +

vue项目中加入图片和背景图：img、background-image

m0_72822997的博客

02-21

5334

vue在行内标签中动态添加背景图片，还有其他样式

m0_50441807的博客

08-03

1924

代码】vue在行内标签中动态添加背景图片，还有其他样式。

vue 行内样式加背景图不显示问题

yxm_136452789的博客

01-22

3205

vue图片放在assets里面，在标签上动态绑定一个背景图样式，不显示问题。 <div class="login" :style="{backgroundImage:'url('+loginImage+')'}"></div> 图片路径 loginImage:'../assets/images/login-background.jpg' //默认图最开始以为路径写错了，就在样式位置直接加，但是显示是正常的。 <style rel="stylesheet/scss" lan

css通过行内样式绑定背景图片

qq_42931285的博客

09-15

4940

css通过行内样式绑定（通过变量、函数、直接拼凑方式）背景图片

vue的style方式绑定行内样式-background-image的方式等~

棠樾的博客

10-20

4344

需求：图片是通过接口获取可以配置，同时图片要自适应容器的大小，这时的解决方法是设置图片为背景图并居中排布。 <view class="giftImg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></view> 行内样式的写法可以使用数组语法也可以使用对象语法： 1.数组语法： // :style 的数组语法可以将多个样式对象应用到同一个元素上： data: { baseStyl..