vue调用地址调用本地图片资源

问题：

vue开发过程中，有时候我们需要以地址的形式访问本地图片资源，而不是相对路径。

方法：

用import引用图片资源，并赋值给变量，然后在模板中调用。

<template>
  <van-row class="header">
    <van-col class="header__scan">
      <van-icon :name="iconScan" size="18px" />
    </van-col>
  </van-row>
</template>

<script>
import IconScan from '@/assets/home/images/icon-scan.png'
import { Row, Col, Icon } from 'vant'
export default {
  data: () => {
    return {
      iconScan: IconScan
    }
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon
  }
}
</script>