Vue-引用静态资源图片

起源

第一次学习Vue项目，图片没有存Oss，而是选择固定路径。

解决问题

第一种

<template>
  <div id="app">
    <img :src="Img" alt="图片资源" class="img">
  </div>
</template>

export default {
  name: 'app',
  data() {
    return {
      Img:require( '../assets/show/pic.jpg')
    };
  },
}
</script>

第二种(常规用法)

<style>
.img {
  background: url(../assets/show/pic.jpg) no-repeat;
}
</style>

• Vue中使用静态文件，得益于vue-loader的处理会改变打包路径，使用require是最好的处理方式