Vue.js组件导入图片遇资源加载失败/模块找不到问题求助

问题场景 #

在Vue组件中循环加载@/assets/images目录下的图片时，出现“找不到模块”或“资源加载失败”提示，尝试过require函数和切换路径无效。组件代码如下：

<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <h2>{{ product.title }}</h2>
      <img :src="product.link" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          title: "cotton",
          link: `./assets/images/cotton.jpg`,
          id: 1,
        },
        {
          title: "purse",
          link: "./assets/images/purse.jpg",
          id: 2,
        },
        {
          title: "leather",
          link: "./assets/images/leather.jpg",
          id: 3,
        },
        {
          title: "wallet",
          link: "./assets/images/wallet.jpg",
          id: 4,
        },
      ],
    };
  },
};
</script>

<style></style>

可行解决方案 #

1. 在data中用require预加载图片 #

Vue中webpack会对静态资源进行编译处理，直接在data中写相对路径无法被解析，需要用require包裹路径：

export default {
  data() {
    return {
      products: [
        {
          title: "cotton",
          link: require('@/assets/images/cotton.jpg'),
          id: 1,
        },
        {
          title: "purse",
          link: require('@/assets/images/purse.jpg'),
          id: 2,
        },
        {
          title: "leather",
          link: require('@/assets/images/leather.jpg'),
          id: 3,
        },
        {
          title: "wallet",
          link: require('@/assets/images/wallet.jpg'),
          id: 4,
        },
      ],
    };
  },
};

注：@是Vue项目中src目录的别名，确保图片实际存放在src/assets/images路径下。

2. 模板中动态拼接路径并使用require #

如果想简化data中的配置，可以只存储图片名称，在模板中动态拼接路径并通过require加载：

修改data结构：

export default {
  data() {
    return {
      products: [
        {
          title: "cotton",
          imgName: "cotton",
          id: 1,
        },
        {
          title: "purse",
          imgName: "purse",
          id: 2,
        },
        {
          title: "leather",
          imgName: "leather",
          id: 3,
        },
        {
          title: "wallet",
          imgName: "wallet",
          id: 4,
        },
      ],
    };
  },
};

修改模板中的img标签：

<img :src="require(`@/assets/images/${product.imgName}.jpg`)" />

3. 检查路径与文件名细节 #

• 确认文件名大小写一致：部分系统（如Linux/macOS）区分文件名大小写，若实际图片名为Cotton.jpg，代码中写cotton.jpg会导致加载失败。
• 验证图片路径：确保图片确实存在于src/assets/images目录下，没有拼写错误或目录层级错误。

4. 检查webpack资源配置（自定义配置场景） #

若使用自定义webpack配置，需确保图片资源被正确处理。在vue.config.js中添加或验证以下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(jpg|png|jpeg)$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192, // 小于8kb的图片转为base64
        name: 'assets/images/[name].[hash:8].[ext]' // 输出路径与命名规则
      })
  }
})

注：Vue CLI默认已配置图片资源处理，此步骤仅针对自定义修改过配置的项目。

内容的提问来源于stack exchange，提问作者soroush mohamadi