How to use dynamic local image in vue?

Question

I'm trying to show dynamic images depending on a selected option (using the template shown below), but when I deploy the app, I think Webpack changes the image filename. How can I prevent this renaming?

<select v-model="geturl">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div v-if="geturl">
    <img
        :src="require(`@/assets/images/${geturl}.jpg`)"
        style="height:250px; width:250px; object-fit:cover;">
</div>

If I change the options in dev mode, I can see the images; but when I deploy the app, the image filename converts to 1.zxc123.jpg.

Webpack changes the names of the image assets it processes but that's why you used require, in order to get that changed name. The bundle also contains that name so be sure to use the bundled files in production — Dan
– Dan, Commented Jan 16, 2021 at 0:21
use images as static files instead of assets which will be processed by webpack — DengSihan
– DengSihan, Commented Jan 16, 2021 at 1:51
@AlexHunter what I means this that you should not let webpack processed your images, because the files will be processed to files which is proper for transportion (depends on its size). For server side render vue (maybe you are not, but it doesn't matters), files in asset folder will be processed by node, but files in static folder will not be proceesed. Consider images as an ordinary file like robot.txt or favicon.ico.more about it — DengSihan
– DengSihan, Commented Jan 16, 2021 at 2:27
because it wont work, im building a library (npm run build-lib), when i install it, console say image not found @Dan — Alex Hunter
– Alex Hunter, Commented Jan 16, 2021 at 14:31

vineeth pappu · Accepted Answer · 2021-01-19 04:52:25Z

4

You can prevent the renaming by simply moving your images to public folder and use absolute paths in the component to import the images.

Then you can use like..

<img :src="`${geturl}.jpg`">

OR if you want to better control the base_url then you can do something like below..

In public/index.html, you need to prefix the link with <%= BASE_URL %>:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

In templates, you will need to first pass the base URL to your component:

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

Then:

<img :src="`${publicPath}${geturl}.jpg`">

answered Jan 19, 2021 at 4:52

vineeth pappu

5422 silver badges7 bronze badges

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

2 Comments

tony19 Over a year ago

The OP commented that they're building the project as a library, so static assets is not a viable option.

vineeth pappu Over a year ago

Ahh sorry, didn't notice that. Thanks for the comment.

tony19 · Accepted Answer · 2021-01-18 23:33:17Z

3

+100

Images written to the output directory are handled by the file-loader (via the url-loader). Vue CLI configures the file-loader with a filename template of:

'img/[name].[hash:8].[ext]'

In your Vue project config, remove .[hash:8] from the filename template to disable the asset hash:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => {
            // file-loader is the fallback loader
            options.fallback.options.name = 'img/[name].[ext]'
            return options                             👆
          })
  }
}

edited Jan 18, 2021 at 23:33

answered Jan 18, 2021 at 23:28

tony19

140k24 gold badges281 silver badges354 bronze badges

2 Comments

tony19 Over a year ago

@vineeth The OP doesn't have use for the hash (and probably no need for caching), and explicitly wants to remove the hash because it prevents usage of the library.

vineeth pappu Over a year ago

Yes. I just read the above comment. Thanks. Yes removing hash is a good solution for this problem

City · Accepted Answer · 2021-01-23 02:15:45Z

0

you should put the image in the public/images (images need to be created) directory, because it will not be compiled by webpack. vue2 is placed in the static/images directory. If you don't want to do this, then you need to require to import the image, because then you can get the correct image path after webpack is compiled.

Example:

...
  data: {imgs: [require('../assets/images/1.png'),require('../assets/images/1.png')]}
...

answered Jan 23, 2021 at 2:15

City

12 bronze badges

1 Comment

City Over a year ago

It is not recommended to delete the webpack loader hash, because it will easily cause caching. When you replace the image, it cannot be updated faster. Lead to the display of old image content.

Collectives™ on Stack Overflow

How to use dynamic local image in vue?

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related