Vue.js在使用src=require()时，webpack报错"Cannot find module './undefined'"。

Question

我正在尝试使用img标签中的src属性从本地文件夹加载图像，但我希望使用后端来加载它们。前端已经有了相对路径，即 "../assets/imgs/" ，而后端只有名称和扩展名，例如 "1.png"。虽然可以工作，但是我还是遇到了错误信息。

这正是困扰我的问题所在。

<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>

这是被调用的函数：

  methods: {
    getIconPath(iconName) {
      return iconName ? require("../assets/imgs/" + iconName) : ''
    }

这是控制台显示的两个错误信息：

[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
       <Navbar> at src/components/navbar.vue
         <Main> at src/main.vue
           <Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
    webpackContextResolve .*$:13
    webpackContext .*$:8
    getIconPath profile.vue:74
    render profile.vue:12
    VueJS 43
    <anonymous> main.js:31
    js app.js:1415
    __webpack_require__ app.js:785
    fn app.js:151
    1 app.js:1488
    __webpack_require__ app.js:785
    checkDeferredModules app.js:46
    <anonymous> app.js:861
    <anonymous>

我发现很少有资源可以帮助我，但其中许多人都说需要修复他们的问题。到目前为止，我尝试将它移动到另一个文件夹中，将require作为函数方法移动，使用绝对路径、使用v-attr以及不使用require进行绑定。但是我仍然没有摆脱错误消息的困扰。这里还有另一个链接，有人和我有相同的问题，但我仍然无法弄清楚他们是如何解决的。

https://forum.vuejs.org/t/how-to-fix-the-console-log-error-when-using-require-method-to-bind-an-img-src/77979

非常感谢您的帮助！！我已经卡在这里很多个小时了，似乎找不到有用的解决方案。如果这不是从后端加载图像的好方法，请随时建议任何其他替代方法。谢谢！

- Victor

---

请修改您的问题，而不是在评论部分放置代码。还请提供所有相关信息，例如“user”（或“image”）数据来自何处以及其数据格式是什么样的。 - Phil

注意，谢谢。抱歉，这是我第一次！我编辑了我的帖子，希望现在更加清晰明了。 - Victor

user 变量从哪里来？它是异步加载的吗？如果是，那么它的初始数据是什么样子的（在被“加载”之前）？ - Phil

用户来自我的商店。我是这样命名它的。老实说，我不知道它是否异步加载。我正在使用axios连接到我的API，不确定是否有用。实际上，我已经按照你的建议将其更改为getIconPath(user.icon)，并且它正在加载而没有任何错误消息！ - Victor

我刚刚在下面写了那个作为答案。 - Phil

在这行代码 getIconPath(iconName) { 后面，你能否加上 console.log(iconName)？ - foxiris

Answer 1

我猜测user是异步获取的数据。我打赌你的初始数据或存储中有类似下面的内容。

{
  user: {}
}

这里的问题在于user.icon在某段时间内是undefined。你无意中将其转换为字符串。

getIconPath(`${user.icon}`)

undefined会被转换成字符串"undefined"（因为JavaScript就是这么有趣），因此会出现错误信息。简单的解决方法是不要使用字符串模板，即

getIconPath(user.icon)

为了避免这种问题，我建议使用计算属性来解决图像导入问题。这比在每个“tick”上执行模板方法更有效率。

computed: {
  userWithIcon () {
    return {
      ...this.user, 
      icon: this.user.icon && require(`../assets/imgs/${this.user.icon}`)
    }
  }
}

并且在您的模板中

<img width="100px" height="100px" :src="userWithIcon.icon">

- Phil

---

啊，现在我终于明白了！非常感谢你！有什么方法可以增加你的声望或者其他东西吗？我很感激！:D - Victor

@VictorDanielCampa，不用谢。通过接受我的答案，您已经为我赚取了那些美味的声望分数。 - Phil

Answer 2

最近我也遇到了类似的问题，通过确保我的数据在渲染视图之前准备好，我成功地解决了它。使用@Phil的假设，你有像user: {}这样的数据，你可以将整个HTML包装在<div v-if="user !== null"></div>中。这确保了用户数据在尝试渲染任何图像或使用用户对象的任何数据之前已经准备好。

这应该消除所有错误。

- Narhzih