vue添加行内背景图时不起作用

皓月当空hy

于 2024-08-30 15:09:20 发布

阅读量364

点赞数 4

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_33911541/article/details/141718916

版权

<div v-for="(item, index) in alarmlistData" :style="{ background: 'url(' + imageUrl + ') no-repeat #081322'}"></div>



data() {
    return {
      imageUrl: require('@/assets/images/home/alarmPop.png')
    };
  },

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皓月当空hy

关注关注

4
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue设置背景图片

easyJob

08-28

725

一、参考来源：（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项目添加背景图报路径不存在

qq_33581509的博客

06-26

841

vue插入背景图Module not found: Error: Can’t resolve ‘…/assets/image/beijing.png’ in 'D:\test\plantfrom\ 这是由于图片路径引入方式不对，原代码如下： <style> #header-background{ background:url("../assets/image/beijing.png"); # 错误的路径引入 width:100%; height:100%; position:fi

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

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

nana18874597151的博客

12-28

4212

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

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

m0_57005111的博客

07-05

1368

避免采坑

vue中使用行内式写背景图

小多的博客

04-22

6226

首先一般的行内式和背景图的行内式不同 // 没有效果 <div :style=" background: url(../img.jpg);"></div> 解决方法： <div :style="{ 'background': 'url('+require('../img.jpg')'+)'}"></div> 或  <div :style="{ 'background': `ur

vue框架行内样式添加背景图片

Lemondeningmeng的博客

01-12

1424

无摘要

Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)

最新发布

qq_36048145的博客

02-04

6461

在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题

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

08-28

这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，图片并不能够正确的显示出来。要解决这个问题，我们可以使用 Node 中的一种比较有效的方式来解决这个...

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

10-18

: 'none'`检查`backgroundImage`是否存在，如果存在则使用其值作为URL，如果不存在则不显示背景图片。 #### 2. 给v-for循环中的标签添加背景图片在使用Vue进行列表渲染时，我们经常使用`v-for`指令来循环生成...

vue行内动态添加背景图

09-23

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

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

yxm_136452789的博客

01-22

3197

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

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

ssxx_zzyy_baba的博客

01-23

1023

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

VUE2 v-for 图片不显示解决方法

FUTURE的博客

11-22

723

VUE CLI4.x v-for 图片不显示解决方法 <div> <ul> <li v-for="item in items"> <img :src="item.src"> {{item.id}} </li> </ul> </div> <script> export default{ data(){ return{ items:[{ src:'../im

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

lu2925028830的博客

04-18

3869

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

vue文件style中设置背景文件打包后不生效问题

若晨工作室

07-28

1593

在vue项目中当需要在vue文件中的style里引入背景图片时，dev环境正常显示，build以后文件布到服务器上打开发现背景图不生效。查看控制台发现这个样式的背景图引入路径错了。解决办法是在打包配置的build文件夹中找到utils.js文件，在该文件中找到vue-style-loader配置的部分加上publicPath: '../../' 重新打包后放到服务器上测试，发现背景图片引入路径就正确了✌✌ ✌ 大功告成！参考文章：https://segmentf...

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

我不想说

11-23

6059

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

在vue中设置背景图片

Bakertt的博客

03-30

5万+

在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0，使得页面顶部不留白 `#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 0px; }`

Vue项目中设置背景图片