Vue项目中实现图片加载必须使用require的正确方法详解

一、问题背景

<img src="../assets/logo.png" alt="Logo">

二、原因分析

三、解决方案：使用require引入图片

1. 基本用法

在Vue组件的<template>中使用require：

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

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

这里，@符号通常在Vue CLI项目中配置为指向src目录。

2. 动态路径处理
<template>
  <div>
    <img v-for="(item, index) in imgList" :key="index" :src="item.src" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { src: require('@/assets/image1.jpg') },
        { src: require('@/assets/image2.jpg') }
      ]
    }
  }
}
</script>
3. 在组件中使用require

在某些情况下，可能需要在组件的方法中使用require：

<template>
  <div>
    <button @click="changeImage">Change Image</button>
    <img :src="currentImage" alt="Current Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: require('@/assets/default.jpg')
    }
  },
  methods: {
    changeImage() {
      this.currentImage = require('@/assets/alternative.jpg');
    }
  }
}
</script>

四、为什么使用require而不是直接写本地路径

  1. 路径解析： require会通过Webpack进行路径解析和处理，确保路径在打包后仍然正确。

    缓存管理： require可以帮助Webpack更好地管理缓存，避免因路径变化导致的缓存问题。

五、其他注意事项

  2. Vue CLI配置： 确保Vue CLI项目中配置了正确的别名（如@指向src）。

六、总结