[JavaScript知识库]Vue组件图片加载注意事项！！！

vue组件加载图片

<template>
  <ul class="btmNav">
    <li>
      <a href="javascript:;" @click="change('/home')">
        <img
          :src="
            '/home' === this.$route.path
              ? iconArr[0].selecetd
              : iconArr[0].normal
          "
          alt=""
        />
        <p :class="['name', '/home' === this.$route.path ? 'checked' : '']">
          首页
        </p>
      </a>
    </li>
    <li>
      <a href="javascript:;" @click="change('/category')">
        <img
          :src="
            '/category' === this.$route.path
              ? iconArr[1].selecetd
              : iconArr[1].normal
          "
          alt=""
        />
        <p :class="['name', '/category' === this.$route.path ? 'checked' : '']">
          分类
        </p>
      </a>
    </li>
    <li>
      <a href="javascript:;" @click="change('/special')">
        <img
          :src="
            '/special' === this.$route.path
              ? iconArr[2].selecetd
              : iconArr[2].normal
          "
          alt=""
        />
        <p :class="['name', '/special' === this.$route.path ? 'checked' : '']">
          精选
        </p>
      </a>
    </li>
    <li>
      <a href="javascript:;" @click="change('/mine')">
        <img
          :src="
            '/mine' === this.$route.path
              ? iconArr[3].selecetd
              : iconArr[3].normal
          "
          alt=""
        />
        <p :class="['name', '/mine' === this.$route.path ? 'checked' : '']">
          我的
        </p>
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      iconArr: [
        {
          normal: require('@/assets/img/icon_game_default.png'),
          selecetd: require('@/assets/img/icon_game_selected.png')
        },
        {
          normal: require('../assets/img/icon_classify_default.png'),
          selecetd: require('../assets/img/icon_classify_selected.png')
        },
        {
          normal: require('../assets/img/icon_select_default.png'),
          selecetd: require('../assets/img/icon_select_selected.png')
        },
        {
          normal: require('../assets/img/icon_mine_default.png'),
          selecetd: require('../assets/img/icon_mine_selected.png')
        }
      ]
    }
  },
  methods: {
    change(url) {
      this.$router.replace(url)
    }
  }
}
</script>

<style scoped lang="less">
.wrap {
  width: 6.9rem;
  margin: 0 auto;
  position: relative;
}
.btm {
  height: 0.98rem;
}
.btmNav {
  display: flex;
  justify-content: space-around;
  width: 7.5rem;
  margin: 0 auto;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  li {
    padding-top: 0.14rem;
    box-sizing: border-box;
    width: 25%;
    height: 0.98rem;
    font-size: 0.2rem;
    text-align: center;
    color: #9399a3;
    flex: 0 0 auto;
    img {
      width: 0.55rem;
      height: 0.5rem;
      margin: 0 auto;
    }
    .checked {
      color: #3b3f47;
      font-weight: 600;
    }
  }
}
</style>

在加载的时候使用数组去存图片路径 但是直接放字符串找不到图片，需要用require去加载！！！！！大坑