Vue.js Error "Cannot find module './undefined'" from webpack when using src=require()

Question

I am trying to load images from a local folder using the src="" from the img tag but I want to load them using the backend. The frontend already has the relative path which is "../assets/imgs/" the backend just has the name and extension ex) "1.png". Thing is that it does work but I'm getting error messages.

This is causing me an issue

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

here is the function that gets called

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

Here are both the error messages I am getting on the console

[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>

I found very little resources to help out but many of them have said that required fixes their issues. So far I tried moving it to a different folder, moving the require as a function method, using absolute path, using v-attr, and binding it without require. Still I haven't had any luck getting rid of the error message. Here is another link of someone else having the same issue as me but I still couldn't figure out how they fixed it.

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

I would very much appreciate the help!! I've been stuck for many hours on this and I can't seem to find a helpful solution. If this isn't a good way to go about loading images from the backend feel free to suggest any other alternative ways to do so. Thank You!

Answer 1

I'm going to take a guess here and say that user is populated with data asynchronously. I bet you have something like this in your initial data or store

{
  user: {}
}

The issue here is that user.icon is undefined, at least for some period of time. Where you are needlessly converting that into a string with

getIconPath(`${user.icon}`)

will convert undefined into the string "undefined" (because JavaScript is fun like that), hence your error message. The simple solution is to not use a string template, ie

getIconPath(user.icon)

---

To avoid these sorts of problems, I would instead use a computed property to resolve image imports. This is more efficient than executing a method in your template which happens on every tick

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

and in your template

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