Vue.js dynamic image paths not loading

Question

I'm trying to load images dynamically within a single file component, but I'm getting an error that the module cannot be found. I think I'm trying to do the same thing as this SO post, but I'm not sure what I'm doing wrong. I used the webpack template to set up my project.

Here's the relevant markup in my template:

<router-link :to="{ name: 'JobsDetail', params: { slug: job.slug } }">
    <span class="icon">
        <img :src="getIconPath(job.slug)"/>
    </span>
    {{ job.title }}
</router-link>

And the function I'm trying to get the image from:

methods: {
    getIconPath (iconName) {
        const icons = require.context('../assets/', false, /\.png$/)
        return iconName ? icons(`./${iconName}.png`) : ''
    }
}

I have the images in the /src/assets/ directory. The error I'm getting in the browser console is:

[Vue warn]: Error in render: "Error: Cannot find module './some-icon.png'."

I'm not sure if this is a webpack config issue, or a problem with the getIconPath function. Anything help is appreciated, thanks!

@acdcjunior this is all inside of a single file component located in /src/components/JobList.vue — Charlie Stanard
– Charlie Stanard, Commented Mar 15, 2018 at 2:01

acdcjunior · Accepted Answer · 2018-03-15 02:04:01Z

4

Considering your JavaScript code is at /src/components/JobList.vue and your images are at /src/assets/, use as follows:

methods: {
    getIconPath (iconName) {
        return iconName ? require(`../assets/${iconName}`) : ''
    }
}

answered Mar 15, 2018 at 2:04

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

acdcjunior Over a year ago

Can you try it hardcoded? Some file you are sure it exists, like /src/assets/my-icon.png you do hardcoded like: <img :src="getIconPath('my-icon.png')"/>.

acdcjunior Over a year ago

If it doesnt work, canyou paste the whole stack trace (not just the first line)? It contains important info.

Charlie Stanard Over a year ago

Got it working from your suggestion to try the hard coded icon name. I'm not sure exactly why it works, but I made the JSON icon path "icon-name.png" instead of adding .png in the require function call.

Russell Shingleton · Accepted Answer · 2018-03-15 02:33:49Z

It looks like to me that the static assets such as images should be going to /static when webpack builds in dev or prod.

Looking in the config file: vuejs-templates/webpack/blob/develop/template/config/index.js, you have the following configuration (provided you haven't changed anything):

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',

So the src should probably be something like:

<img src="/static/whatEverMyIconIs.png"/>

EDIT:

Looking further into the configs, in vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js, there's a url-loader plugin which should place images into /static/img:

 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

Which could make your src url (depending on how the icons are being loaded):

<img src="/static/img/whatEverMyIconIs.png"/>

Collectives™ on Stack Overflow

Vue.js dynamic image paths not loading

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related