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/ponents/profile.vue
       <Navbar> at src/ponents/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.

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!

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/ponents/profile.vue
       <Navbar> at src/ponents/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/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!

• javascript
• image
• vue.js
• webpack
• vue-cli

• Please edit your question instead of putting code in the ments section. Please also provide all relevant information such as where the user (or is it image) data es from and what its data format looks like – Phil Commented Apr 29, 2020 at 3:52
• noted thank you sorry this is my first time! I edited my post hope that makes a lot more sense. – Victor Commented Apr 29, 2020 at 3:58
• Where does user e from? Is it loaded asynchronously? If so, what does its initial data look like (before it's loaded)? – Phil Commented Apr 29, 2020 at 4:01
• user es from my store. I named it that way. Honestly I have no clue if it is loaded asynchronously. I am using axios to connect to my api not sure if that's useful to know. Actually I changed it to getIconPath(user.icon) as you mentioned and it is loading without any error messages! – Victor Commented Apr 29, 2020 at 4:08
• I'd just written that up as an answer below