v-binding an image from an object to an img src not working... #42

rchrdnsh · 2017-06-16T02:27:39Z

Soooo,

...doing this:

...from this:

...and getting this:

The first row in the above pic are from the v-for version and the second row are the static hard coded HTML versions of the same things.

So I dunno why the images are not loading, when all the other data, including the alt stuff is loading...checked the file path of the images, which are fine, so I must be doing something wrong, just don't know what...🤔

Any thoughts are most welcome, thanks! XD

CodinCat · 2017-06-16T02:33:42Z

Questions should be asked on Stack Overflow or the Vue.js forum. Here is for the issues related to the PWA template.

rchrdnsh · 2017-06-16T02:40:28Z

I can get it to work outside of the vue-pwa template, tho, so i wondered if it was a template problem. I will ask on the forum as well :-)

ragingwind · 2017-06-16T02:57:13Z

v-binding is not related to vue-pwa-tempalte. It's a general question how to make it with vue.je. Vue.js already has great place for this https://forum.vuejs.org/. You look find the right place to ask of this https://forum.vuejs.org/t/v-binding-an-image-from-an-object-to-an-img-src-not-working-in-vue-pwa-template/12754

rchrdnsh · 2017-06-16T02:58:30Z

ok, I'll close this one and wait for help there then...

rchrdnsh · 2017-06-16T05:31:37Z

I'm re-opening this because I'm thinking the issue might not be with Vuejs, but with the Webpack configuration in the template, although I don't know for sure...

Hi @addyosmani, I'm asking you because I don't know who else put this template together and I don't know if I'm running into a bug or not (it could still easily be me being 'not smart' or something
😬 )...

Anyway, do you think anything in the Webpack config could be causing the issue stated above in the first post? The following snippet is from the webpack.base.conf file

I've been seeing mentions of this piece in other threads similar to this one, although I don't understand what's going on in the code at all, or how to fix anything. This is the file path...

Again, apologies if this is the wrong place for whatever the issue is...I have asked on the Vue JS forum as well, but so far it's been crickets over there...

ragingwind · 2017-06-16T06:03:48Z

I hope it helps you

as you said, it's relevant that how to use webpack and configurations not vue-template. I would give a recommendation you to refer to many of references and guides in the net. templates generated by vue init has a very basic skeleton structure so you should understand that it makes better one

It looks that url-loader can't fine image resource properly

rchrdnsh · 2017-06-16T07:17:59Z

Woo Hoo!!! @LinusBorg solved it for me...it was a webpack requirement. Here is his message on the Vuejs Forum:

"You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this strong as a dependency.

The url-loader that is configured for image file types (is you use our template) will then convert this path that is relative to the component file into a path that is relative to the build files, and it will copy the image to /dist/assets..."

Then I wrote back:

"Holy Scooby Snacks! It worked, thank you!!!

I'm now wondering, however, if there is a better pattern to access images dynamically. Is it possible to not have to specify the backwards travel through the file path...

require('../../assets/images/team/richard-nash.jpg')

...and simply ask for the image from the assets folder?...

@assets/images/team/richard-nash.jpg'

...so worrying about exact file path position relative to other files and folders is made irrelevant? Is that a thing that is possible, or must we use require and mentally track file paths up and down the apps directory structure?

Thank you, again, @LinusBorg ! XD

R"

Anyway, at the very least the issue is solved for now, and happy to close this one and dive deeper into webpack over the weekend. Thank you for your patience @ragingwind with a newb like myself :-)

kengres · 2017-08-25T15:10:15Z

@rchrdnsh thank you for opening and reopening this issue. you just saved my arse (one year later) on a problem I spend 30min figuring out. thanks a lot!!! 👍

edencorbin · 2018-05-13T15:13:55Z

Hey the require('path') worked for me too. I'm new to Vue and find this one odd, what if the image is messing, this would be a compile error I believe.

julianandreszb · 2018-07-11T20:04:02Z

Using: Vue 2.0 + Browserify

I had to put the full path to the image and use computed function

Path of Images:

www/images/lfpinpad/error.png
www/images/lfpinpad/offline.png
www/images/lfpinpad/online.png

Path of Component

www/src/components/app/AppTopMenu.vue

<template>
   <img v-bind:src="imageSrc" />
</template>

export default {
    data() {
        return {}
    },
    computed: {
        imageSrc: function () {
            return './../../../images/lfpinpad/' + Shared.websocket.websocket_image_status
        }
    }
}

Where Shared.websocket.websocket_image_status is one of:

offline.png
online.png
error.png

hamzeh010 · 2018-09-15T20:13:24Z

Remove relative path and user basUrl

 data() {
            return {
             
                baseUrl:window.location.origin
            }
        },

SarKerson · 2018-10-01T07:59:08Z

I also met the same problem. The solution given by @rchrdnsh solved the problem.
that is:

...
<img :src='img'>
...
const img = require('../../assets/images/team/richard-nash.jpg')

But I also found another solution, to edit the file webpack.config.js, change the chunkhash to hash

      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash:5]'
          }
        }]
      }

s4n4s · 2018-10-19T07:46:58Z

Hi,
i tried all the solution given but it still dosen't work for me.
I tried loading the images by using require in v-bind:src but nothings happen.

json file:
[ { "title": "Accueil", "content": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. ées 1500, quand un imprimeur", "img_src": "../../assets/img/home/carousel/navy_seals_1.jpg" }, { "title": "Accueil", "content": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. ées 1500, quand un imprimeur", "img_src": "../../assets/img/home/carousel/navy_seals_1.jpg" },
File import

<script> import json from '../../data.json' export default { name: "store", data(){ return { data:json} }} </script>

Loop v-for for display

<div class="iteam_card_container"> <b-col ><div v-for="item in data" class="item_card"> <img :src="item.img_src" /> <div> <b-button class="card_btn" :variant="primary">Ajouter au panier</b-button> <p class="title">{{ item.title }}</p> <p class="card_content">{{ item.content}}</p> </div> </div></b-col> </div>
Thanks for help.

s4n4s · 2018-10-19T11:58:16Z

Solved.

<img :src=" require(@/assets/img/home/carousel/${item.img_src}) " />
item.img_src is the name of the image file.

mayank1513 · 2019-03-25T07:07:36Z

Woo Hoo!!! @LinusBorg solved it for me...it was a webpack requirement. Here is his message on the Vuejs Forum:

"You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this strong as a dependency.

The url-loader that is configured for image file types (is you use our template) will then convert this path that is relative to the component file into a path that is relative to the build files, and it will copy the image to /dist/assets..."

Then I wrote back:

"Holy Scooby Snacks! It worked, thank you!!!

I'm now wondering, however, if there is a better pattern to access images dynamically. Is it possible to not have to specify the backwards travel through the file path...

require('../../assets/images/team/richard-nash.jpg')

...and simply ask for the image from the assets folder?...

@assets/images/team/richard-nash.jpg'

...so worrying about exact file path position relative to other files and folders is made irrelevant? Is that a thing that is possible, or must we use require and mentally track file paths up and down the apps directory structure?

Thank you, again, @LinusBorg ! XD

R"

Anyway, at the very least the issue is solved for now, and happy to close this one and dive deeper into webpack over the weekend. Thank you for your patience @ragingwind with a newb like myself :-)

Hi...

Can you please explain how you used require???

IFMaggie · 2019-03-29T07:08:43Z

A similar problem has been encountered in a recent project. After reading your article, it has been resolved. Thank you.
The problem is: ”img src='../static/assest/images/index/inst_logo01.png' /> “There is no problem with introducing images.
"img :src='../static/assest/images/index/inst_logo01.png' /> "The src attribute written by the method cannot be parsed.
Solution: "img src='../../assest/images/index/inst_logo01.png' />"

hoangtranson · 2019-07-23T01:55:22Z

my solution is using computed

export default {
  props: {
    article: {
      type: Object
    }
  },
  computed: {
    url: function() {
      return `/_nuxt/${this.article.image}`;
    }
  },
}

then use it normally

<img v-bind:src="url" alt="">

harismann · 2019-08-27T06:08:09Z

thank you @s4n4s i solved with your solution:

item.img_src is the name of the image file.

but i need add backtick() to solve it like this : <img :src=" require(@/assets/img/home/carousel/${item.img_src}`) " />

anujpradhaan · 2019-09-02T04:59:12Z

so the solution is <img :src="require(PATH/${item.img_src)"/> path can be different in your particular case. Example in my case it was ../assets/img/portfolio.

Note: Remember to put `` not '' inside require. Because github hides them considering its code.

cornesmith · 2020-07-11T17:25:23Z

Thanks @rchrdnsh. Three years later this "feature" still persists in webpack and Vue.
In a Vue component just used:

<template>
  <div>
     <img :src="image"/>
  </div>
</template>
...
<script>
    export default {
        data: () => {
            return {
                image: require('../assets/img/thumbnail.jpg'),
            }
        }
  }
</script>

And it works like a charm.

xrusselx · 2020-07-29T11:02:31Z

Thanks @rchrdnsh. Three years later this "feature" still persists in webpack and Vue.
In a Vue component just used:
<template>
  <div>
     <img :src="image"/>
  </div>
</template>
...
<script>
    export default {
        data: () => {
            return {
                image: require('../assets/img/thumbnail.jpg'),
            }
        }
  }
</script>
And it works like a charm.

Hello @cornesmith! I'll try to use that but an error occurs that says: require is not defined. I'm just a beginner and I'm using vite. And if I'm correct, vite do not use webpack.

johnSoneka · 2020-08-01T22:06:16Z

After spending more that four hours looking for the solution it finally worked

Using require() in my array
Thanks to this community

atheistrepublic · 2020-10-31T09:00:34Z

Yes require also works for me. Thanks

Red-Asuka · 2020-12-16T08:30:43Z

Solved.

<img :src=" require(@/assets/img/home/carousel/${item.img_src}) " />
item.img_src is the name of the image file.

it also works for me. thx

<img
  :src="require(`@/assets/images/${item.img}`)"
  :alt="item.title"
/>

gcampionpae · 2020-12-17T14:08:34Z

worked for me too, thanks for this!

burakhanaksoy · 2021-06-27T07:55:54Z

After spending more that four hours looking for the solution it finally worked

Using require() in my array
Thanks to this community

Thank you~ This solved it for me. @johnSoneka

kishanvaishnav · 2021-09-13T05:31:47Z

Solved.

<img :src=" require(@/assets/img/home/carousel/${item.img_src}) " />
item.img_src is the name of the image file.

i'm using this but not solved

I am facing this issue

./src/components/Home.vue?vue&type=template&id=8dc7cce2 (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Home.vue?vue&type=template&id=8dc7cce2)
Module not found: Error: Can't resolve '@/assets/image/${item.imageArray}' in 'C:\Users\TFVFGHGFHJG\Desktop\vue-projects\allevahomecare\src\components'

Barnabas02 · 2021-12-01T05:23:06Z

Using the require('') helped me solve the problem.
Thank you

mullermad · 2024-08-15T14:24:48Z

guys if u are using vite
// Function to get the URL of an image
const getImageUrl = (filename) => {
// Correct usage with import.meta.url
return new URL(../assets/img/${filename}, import.meta.url).href;
}; and acess in :src="getImageUrl(movie.poster)" works

rchrdnsh closed this as completed Jun 16, 2017

rchrdnsh reopened this Jun 16, 2017

rchrdnsh closed this as completed Jun 16, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v-binding an image from an object to an img src not working... #42

v-binding an image from an object to an img src not working... #42

rchrdnsh commented Jun 16, 2017

CodinCat commented Jun 16, 2017

rchrdnsh commented Jun 16, 2017 •

edited

Loading

ragingwind commented Jun 16, 2017 •

edited

Loading

rchrdnsh commented Jun 16, 2017

rchrdnsh commented Jun 16, 2017

ragingwind commented Jun 16, 2017 •

edited

Loading

rchrdnsh commented Jun 16, 2017

kengres commented Aug 25, 2017 •

edited

Loading

edencorbin commented May 13, 2018

julianandreszb commented Jul 11, 2018 •

edited

Loading

hamzeh010 commented Sep 15, 2018 •

edited

Loading

SarKerson commented Oct 1, 2018

s4n4s commented Oct 19, 2018 •

edited

Loading

s4n4s commented Oct 19, 2018

mayank1513 commented Mar 25, 2019

IFMaggie commented Mar 29, 2019

hoangtranson commented Jul 23, 2019

harismann commented Aug 27, 2019

anujpradhaan commented Sep 2, 2019 •

edited

Loading

cornesmith commented Jul 11, 2020

xrusselx commented Jul 29, 2020 •

edited

Loading

johnSoneka commented Aug 1, 2020

atheistrepublic commented Oct 31, 2020

Red-Asuka commented Dec 16, 2020

gcampionpae commented Dec 17, 2020

burakhanaksoy commented Jun 27, 2021 •

edited

Loading

kishanvaishnav commented Sep 13, 2021 •

edited

Loading

Barnabas02 commented Dec 1, 2021

mullermad commented Aug 15, 2024

v-binding an image from an object to an img src not working... #42

v-binding an image from an object to an img src not working... #42

Comments

rchrdnsh commented Jun 16, 2017

CodinCat commented Jun 16, 2017

rchrdnsh commented Jun 16, 2017 • edited Loading

ragingwind commented Jun 16, 2017 • edited Loading

rchrdnsh commented Jun 16, 2017

rchrdnsh commented Jun 16, 2017

ragingwind commented Jun 16, 2017 • edited Loading

rchrdnsh commented Jun 16, 2017

kengres commented Aug 25, 2017 • edited Loading

edencorbin commented May 13, 2018

julianandreszb commented Jul 11, 2018 • edited Loading

hamzeh010 commented Sep 15, 2018 • edited Loading

SarKerson commented Oct 1, 2018

s4n4s commented Oct 19, 2018 • edited Loading

s4n4s commented Oct 19, 2018

mayank1513 commented Mar 25, 2019

IFMaggie commented Mar 29, 2019

hoangtranson commented Jul 23, 2019

harismann commented Aug 27, 2019

anujpradhaan commented Sep 2, 2019 • edited Loading

cornesmith commented Jul 11, 2020

xrusselx commented Jul 29, 2020 • edited Loading

johnSoneka commented Aug 1, 2020

atheistrepublic commented Oct 31, 2020

Red-Asuka commented Dec 16, 2020

gcampionpae commented Dec 17, 2020

burakhanaksoy commented Jun 27, 2021 • edited Loading

kishanvaishnav commented Sep 13, 2021 • edited Loading

Barnabas02 commented Dec 1, 2021

mullermad commented Aug 15, 2024

rchrdnsh commented Jun 16, 2017 •

edited

Loading

ragingwind commented Jun 16, 2017 •

edited

Loading

ragingwind commented Jun 16, 2017 •

edited

Loading

kengres commented Aug 25, 2017 •

edited

Loading

julianandreszb commented Jul 11, 2018 •

edited

Loading

hamzeh010 commented Sep 15, 2018 •

edited

Loading

s4n4s commented Oct 19, 2018 •

edited

Loading

anujpradhaan commented Sep 2, 2019 •

edited

Loading

xrusselx commented Jul 29, 2020 •

edited

Loading

burakhanaksoy commented Jun 27, 2021 •

edited

Loading

kishanvaishnav commented Sep 13, 2021 •

edited

Loading