vue@cli3使用绝对路径引入public目录下的静态文件

 

官网地址：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#url-%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99

最近学习vue3，在封装图片时需要传入路径，相对路径太麻烦，绝对路径报错，在官网看到这个特记录一下

 

<template>
  <div class="trait">
    <img :src="`${publicPath + sonUrl}`"/>
    {{sonUrl}}
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: {
    sonUrl: String,
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
    };
  },
});
</script>