Vue入门必备：教你如何用require轻松引入图片资源

1. 基本概念

1.1 静态资源与动态资源

1.2 使用require引入图片

在Vue中，使用require方法可以引入本地静态资源。require会在编译过程中被执行，最终会得到对应文件的内容或者文件编译后的目录路径。

2. 具体演示

2.1 在Vue组件中使用require

<template>
  <div>
    <img :src="imageUrl" alt="Logo">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/logo.png')
    };
  }
}
</script>

2.2 引入不同大小的图片

2.3 在Vue单文件组件(SFC)中使用require

在Vue单文件组件中，你可以在<style>、<script>或<template>标签中使用require。

<style>
@require('./path/to/file.css');
</style>

或者

<script>
const logo = require('./path/to/logo.png');
export default {
  data() {
    return {
      logo: logo
    };
  }
}
</script>

3. require.context

require.context是一个函数，它允许你根据目录下的文件类型来动态引入模块。这对于组件库的开发特别有用。

const images = require.context('./assets/images', false, /\.png$/);

export default {
  methods: {
    getImagePath(filename) {
      return images(filename);
    }
  }
}

4. 总结