vue中的require不支持传入变量怎么办呢？

在vue或nuxt项目中，有时候列表中图片资源加载需要是一个变量， 这种情况下会报错, 例子如下:

// 错误示例
<template>
  <div >
    <template v-for="appinfo in appinfolist">
      <div v-bind:key="appinfo.id">
        <el-image
          :src="require(appinfo.iconsrc)"
        />
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      appinfolist: [
        {
          iconsrc: "../assets/logo.png",
        },
      ],
    };
  },
};
</script>

那怎么解决这个问题呢？

目前有两种办法

第一种

虽然 webpack require传入的路径不能是个纯变量，但路径可以设置为 字符串 + 变量 这种形式

代码如下:

<template>
  <div >
    <template v-for="appinfo in appinfolist">
      <div v-bind:key="appinfo.id">
        <el-image
          :src="require('../assets/' + appinfo.iconsrc)"
        />
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      appinfolist: [
        {
          iconsrc: "logo.png",
        },
      ],
    };
  },
};
</script>

第二种

变量直接赋值为 require("../assets/logo.png")

代码如下:

<template>
  <div >
    <template v-for="appinfo in appinfolist">
      <div v-bind:key="appinfo.id">
        <el-image
          :src="appinfo.iconsrc"
        />
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      appinfolist: [
        {
          iconsrc: require("../assets/logo.png"),
        },
      ],
    };
  },
};
</script>

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：vue中的require不支持传入变量怎么办呢？