问题

这是我在开发中遇到的问题。在网站的分页面中，背景图片的格式几乎一模一样。只是上面的文字和图片不一样而已。

所以我希望写一个组件，然后页面只需要传入背景图片地址和标题就可以显示出相关内容。

于是我动手写了，大致思路是一个盒子，内部通过相对定位固定上面的标题，然后盒子有一个背景图片。

问题来了，怎么给盒子设置背景图片？

分析

盒子的背景图片，最先想到的应该是css。我一开始也想到的是这个办法，通用的样式代码是这样的：

.box {
	background: url('图片地址');
	background-size: 100%, 100%;
	background-repeat: no-repeat;
}

但是问题来了，如何动态的识别接收到的url并放入css中？这时候我就想到了attr。我们可以设置自定义属性，然后在css中通过attr用到它。

但是经过尝试，失败了。

按照这种方式，先设置一个value：

然后在css中用到：

显然是行不通的。因为background后面，还有一串很长的代码包裹。

所以再去找了其他方法，最后发现结果。

处理方法

通过拼接字符串的方法，在节点中通过style实现：

我给大家看一下我的结构：

<template>
    <div class="box">
      <!-- 图片 -->
      <div class="show" :style="{backgroundImage: 'url(' +thisurl+ ')'}">
        <div class="showdel">
          <h1>{{title}}</h1>
        <h4>{{secondtitle}}</h4>
        </div>
      </div>
    </div>
  </template>

其实针对于整个问题，处理方式也不止一种，我们当然也可以写一个盒子，在里面放一张图片，然后把标题设置为相对定位在图片上进行定位。这样的方式还是有点麻烦的，做的不好响应式容易出现问题。

还有就是，因为这一个小点并了解解决方法，虽然有点钻牛角尖，但是是一件有收获的事情。