探索Vue中更加优雅的图片应用方法

错误示范：

也许你经常会这样写代码：

<code><<strong>img</strong> :src="src"> </<strong>template</strong>> <<strong>script</strong>> <strong>export</strong> <strong>default</strong> { <strong>data</strong>() { <strong>return</strong> { src: require('xxx.jpg') } } } </<strong>script</strong>></code>

在webpack中，require会自动处理资源，这没错。但是将图片路径放到Vue的data中，Vue会遍历data，给src加上响应式。然而，大部分情况下，这个src并不需要响应式，这导致了性能浪费。

通过computed解决：

解决这个问题的一种方案是使用computed：

<code> <<strong>img</strong> :src="src"> </<strong>template</strong>> <<strong>script</strong>> <strong>const</strong> src = require('xxx.jpg'); <strong>export</strong> <strong>default</strong> { computed: { <strong>src</strong>() { <strong>return</strong> src; } } } </<strong>script</strong>></code>

computed本身具有缓存功能，可以减少性能浪费。

当图片不变时直接引入：

<code> <<strong>img</strong> :src="src"> </<strong>template</strong>></code>

或者：

<code> <<strong>div</strong> class="bg"></<strong>div</strong>> </<strong>template</strong>> <<strong>style</strong>> .bg { <strong>background</strong>: url("xxx.jpg"); } </<strong>style</strong>></code>

当图片不会变化时，可以直接引入，不需要赋值给一个变量。同样，也可以通过切换类名动态显示图片。

通过CSS变量切换图片：

这是我想到的一个新方法，理论上CSS变量可以存储任何值，那么能否存放图片地址呢？

<code><<strong>div</strong> class="bg"></<strong>div</strong>> </<strong>template</strong>> <<strong>script</strong>> <strong>export</strong> <strong>default</strong> { <strong>mounted</strong>() { <em>// 第一种方法，图片地址或base64</em> this.$el.style.<strong>setProperty</strong>('--bg', `url("http://xxx.com/1.jpg")`); <em>// 第二种方法</em> this.$el.style.<strong>setProperty</strong>('--bg', `url("${require('../assets/1.png')}")`); } } </<strong>script</strong>> <<strong>style</strong>> .bg { --bg: url('xxx.jpg'); <strong>background-image</strong>: var(--bg); } </<strong>style</strong>></code>

我个人测试成功，这个方法也可行，而且相比computed更有效，因为操作CSS变量的开销更小。需要注意的是，CSS中的图片通常是写在url()中的，因此需要拼接一个字符串url(你的内容)。

通过CSS绘制：

这其实有点题外话，有时候一些图形是可以通过CSS绘制的。例如下面这个三角形，你可以在百度上找到各种CSS三角形生成器，用CSS画这种图形比引入一个图片更好。

综上所述，不要在Vue的data中引入图片，尽量使用CSS。