一、vue涉及到图片需要用require，注意单引号/双引号的使用

<template v-for="(item,index) in menu"><div :key="item.id":style="{backgroundImage:'url('+itemImg(item)+')'}"></div>
</template>

二、需要传参的话要用闭包的形式接收参数

computed:{itemImg() {return (item) => {return require(`../assets/image/main/menu_${item.id}.png`)}}
}

三、也可以直接写在标签上

      <template v-for="(item,index) in menu"><div :key="item.menuId":style="{backgroundImage:'url('+require(`../assets/image/main/menu_${item.id}.png`)+')'}"></div></template>

vue动态style添加背景图backgroundImage，结合computed相关推荐

vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
CSS基础-02 background（背景色）（背景色 background-color、背景图 background-image）
文章目录 1. 背景色 1.1 语法 1.2 示例 2. 背景图 1.1 语法使用背景图背景图位置固定背景图(不随页面滚动) 1.2 示例 1. 背景色 1.1 语法 background-co ...
cesium: 设置skybox透明并添加背景图 ( 003 )
第003个点击查看专栏目录本示例的目的是介绍如何在vue+cesium中设置skybox透明并添加背景图. 我们不想要黑乎乎的背景,想自定义一个背景图,然后前面显示地球. 直接复制下面的 vue+ ...
ps怎么把图片背景变透明_ps怎么添加背景？ps怎么添加背景图？
PS添加背景图的教程: 1.打开Adobe Photoshop.这是一个蓝色应用图标,其中包含字母" Ps". 2.单击文件.它位于屏幕顶部菜单栏的左侧. 3.点击打开....它在 ...
echarts添加背景图
echarts添加背景图来源:https://www.liuyjuan.com/295.html 1)简单的方法直接给到外层的div元素上 /*比如说这段css样式*/ .TheStatistic ...
MFC 对话框添加背景图
// 给对话框添加背景图 BOOL CEditCtrlMultilineDlg::OnEraseBkgnd(CDC* pDC) {// TODO: 在此添加消息处理程序代码和/或调用默认值CDC Me ...
如何在eclipse制作的APP中添加背景图
如何在eclipse制作的APP中添加背景图 1.首先把图片拉入drawable-hdpi中,a1.jpg(注:图片名不可为中文) 2.在.xml文件中加入android:background=&qu ...
Android studio -添加背景图
一. 新建工程二. 选择Empty Activity 三. 填写项目名称并选择Android系统版本四. 这样一个工程就建好了五. 接下来找到一张图片复制(相片名称要英文字母开头) 六. 然后粘 ...
Qt中代码添加背景图
第一步选择一张背景图下到本地第二步在qt中点击添加新文件选择图中位置随便起个名字,点击下一步这时项目中多出一个目录选择打开资源编辑器底部添加前缀:注意该前缀是在内部使用图的路径点击添加 ...

vue动态style添加背景图backgroundImage，结合computed

一、vue涉及到图片需要用require，注意单引号/双引号的使用

二、需要传参的话要用闭包的形式接收参数

三、也可以直接写在标签上

vue动态style添加背景图backgroundImage，结合computed相关推荐

最新文章

热门文章