Vue根据路由动态加载本地背景图片

项目需求：首页有一张中国地图，点击地图中不同的省份进入省份详情模式，此详情页面包含一张当前省份特定的背景图片，此页面的路由为/provinceId/9, 其中数字部分表示当前省份的ID, 图片路径位置为src/assets/images/pic1,pic2,pic3,…等，pic后面的数字与省份的ID一一对应, 效果如下图所示

HTML部分

<template>
  <div class="province-detail" :style="styleObject">
    <h1></h1>
  </div>
</template>

JS部分

data() {
    return {
      styleObject: {
        backgroundImage:
          "url(" + require(`../assets/images/pic${this.$route.params.provinceId}.jpg`) + ")"
      }
    };
  }

关键知识点总结

vue支持绑定style到对象上,这样可避免臃肿的html结构, 如 :style="styleObject" && styleObject = { }

url()里的路径务必使用require来引入, 否则可能会出现找到背景图片的情况. 如下所示:

backgroundImage: "url(" + require(`../assets/images/pic${this.$route.params.provinceId}.jpg`) + ")"