Vue.Js Dynamic Images Not Working

Vue.js dynamic images not working

I got this working by following code

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
  }

and in HTML:

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

But not sure why my earlier approach did not work.

How to dynamically display an image in VueJS?

You have to expose your images to your web server. Hopefully Vue-cli does that for you. You have to move your assets folder from src to the public folder.

More info on https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Vuejs image src dynamic load doesn't work

So the real fix would be this:

:src="getImage(obj.img)"

getImage(path) {
  return require(path)
}

You can read more about it in this response from Evan, the creator of Vue

Vue.js dynamic image src with require is not defined error

1. Put your images into the static folder.

2. rename to:

Now you have a cards folder inside the static folder

Src binding in vue is not showing images

Solution 1:
If you don't want to use Webpack assets from the assets directory, you can add the images to the static directory.

In your code, you can then reference these files relative to the root (/):

<!-- Static image from static directory -->
<img src="/my-image.png" />

<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />

Nuxt doesn't change this path, so if you customize your router.base then you'll need to make sure to add that manually to your paths. For example:

<img :src="`${yourPrefix}/my-image.png`" />

Solution 2: When working with dynamic images you will need to use require

 <img :src="require(`~/assets/img/${image}.jpg`)" />

Image not displaying in loop Vue.js

Dynamic img src URL with OR statement not working properly in NUXT component

The || operator doesn't catch exceptions, which is what happens when a required URL does not exist.

One way to make that work is to use a method or a computed prop that handles the require error, defaulting to day-1.jpg:

<template>
  <img :src="imgUrl">
</template>

<script>
export default {
  props: {
    project: Object
  },
  computed: {
    imgUrl() {
      try {
        return require(`@assets/${this.project?.image}`)
      } catch (e) {
        return require('@/assets/day-1.jpg')
      }
    }
  }
}
</script>

img src with v-bind not displaying image

v-bind:src works as expected. The problem is your path makes no sense in the context of your web page.

To translate a project path into a web path, use vue-loader. Namely:

test: require('./relative/path/to/image.png')

Or you can make use of the existing transform rules.

Note: This might vary based on configuration, but in a standard Vue project, replacing ~/assets with @/assets should fix the problem, without needing require().

---

Related Topics