Vue项目使用require加载图片报错：@/src/assets/images/1.jpg未转译

问题原因 #

webpack对require的路径解析依赖静态可识别的字符串，动态拼接的路径（比如../assets/images/ + item_data.img）无法在编译阶段被正确解析，导致资源未被转译处理。

解决方案 #

方案1：在数据源中预加载图片（推荐） #

直接在App组件的数据源里用require加载好图片资源，再传递给子组件使用：
修改App组件的data部分：

data() {
  return {
    sliderItems: [
      { id: 1, name: "img1", img: require("@/assets/images/1.jpg") },
      { id: 2, name: "img2", img: require("@/assets/images/2.jpg") },
      { id: 3, name: "img3", img: require("@/assets/images/3.jpg") },
    ],
  };
}

子组件直接使用预加载好的路径：

<template>
  <div class="v-carousel-item">
    <img :src="item_data.img" alt="" />
  </div>
</template>

方案2：子组件使用静态前缀+动态变量的写法 #

webpack允许require包含部分动态变量，但必须保留静态路径前缀。修改子组件的图片src：

<template>
  <div class="v-carousel-item">
    <img :src="require(`@/assets/images/${item_data.img}`)" alt="" />
  </div>
</template>

注：确保item_data.img是完整文件名（如"1.jpg"），且项目已配置@指向src目录（Vue项目默认已配置）。

方案3：通过计算属性处理路径 #

在子组件中添加计算属性，统一解析图片路径：

<template>
  <div class="v-carousel-item">
    <img :src="imageSrc" alt="" />
  </div>
</template>
<script>
export default {
  props: {
    item_data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    imageSrc() {
      return require(`@/assets/images/${this.item_data.img}`);
    },
  },
};
</script>

关键提示 #

• 不要在require中完全动态拼接路径，webpack需要静态前缀来识别并打包目标资源。
• 使用@路径别名可以避免相对路径的层级混乱，提升代码可靠性。

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