使用 src=require() 时，来自 webpack 的 Vue.js 错误“找不到模块 './undefined'”

Posted 2023-02-23

【中文标题】使用 src=require() 时，来自 webpack 的 Vue.js 错误“找不到模块 \'./undefined\'”

【英文标题】：Vue.js Error "Cannot find module './undefined'" from webpack when using src=require()使用 src=require() 时，来自 webpack 的 Vue.js 错误“找不到模块 './undefined'”

【发布时间】：2020-08-13 01:44:23

【问题描述】：

我正在尝试使用 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

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

【问题讨论】：

请edit your question 而不是将代码放在 cmets 部分。还请提供所有相关信息，例如user（或者是image）数据来自哪里以及它的数据格式是什么样的

注意到谢谢对不起这是我第一次！我编辑了我的帖子，希望这更有意义。

user 来自哪里？它是异步加载的吗？如果是这样，它的初始数据是什么样的（在它加载之前）？

用户来自我的商店。我是这样命名的。老实说，我不知道它是否是异步加载的。我正在使用 axios 连接到我的 api，不确定这是否有用。实际上我把它改成了getIconPath(user.icon)，正如你提到的，它正在加载，没有任何错误消息！

我刚刚把它写成下面的答案？？？？

【参考方案1】：

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

这应该完全消除任何错误。

【参考方案2】：

我在这里猜测一下，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   :src="userWithIcon.icon">

【讨论】：

啊，这太有意义了！！！谢谢！！！非常！！！有什么方法可以增加您的声誉或其他东西吗？我很感激！ :D

@VictorDanielCampa 不客气，接受我的回答，你已经给了我那些美味的声誉积分?