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

今天写代码的时候发现把背景图片写在行内样式中没法显示

<div class="template-card" style="background-image:url(../images/B5.jpg);">

在检查的时候发现在网页中可以看到元素上已经有了这个样式，但是却没有生效。

解决方法:修改代码为：

<div class="template-card" :style="{ 'background': 'url(' + require('../images/B5.png') + ')'}">

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

在vue项目中实现图片打马赛克
在vue项目中实现图片打马赛克使用image-mosaic插件. 安装依赖 npm install image-mosaic -D 项目引用 // .vue 文件 <div id=" ...
vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
vue项目中Tab切换，以及不同状态如何显示
前言例如:这里主要讲到项目中我们会遇到的Tab切换,以及订单状态的显示. 一.Tab切换要如何去写? 代码如下(示例): <el-tabs type="border-card&quo ...
Vue 项目中 Cropper 图片裁剪的使用及遇到的问题
为什么用个人中心的头像上传需要对图片进行裁剪 1.安装引入 npm install vue-cropper 在 main.js 中 import VueCropper from 'vue-cropp ...
vue项目设置背景图片
首先在div上面设置以下参数 <template> <div class="bg" :style ="bg"> </div> ...
Vue项目中使用图片裁切器 cropperjs (头像裁切)
cropperjs官方文档 cropperjs结合element-ui 组件后的显示效果: 1. npm 安装 cropperjs cmd命令行输入:npm install cropperjs --s ...
vue项目中，Echarts柱状图和折线图混合显示
<div ref="myChart" :style="{width: '800px', height: '500px'}"></div> ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

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

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

最新文章

热门文章