I got a parent ponent which sends a data object to the children ponent like this:

<child object-data=" url: 'url here', title: 'Title'"></child>

Then on my children ponent, I get this object data by doing:

<script>
    export default {
        props: [
            'objectData'
        ]
    }
</script>

Now, for some reason, I can use title without any problem like this {{ objectData.title }} and shows up.

But when it es to the URL inside an img tag it's not rendering the image.

I attempted doing the following:

<img :src="objectData.url"/> <--- not rendering

<img v-bind:src="objectData.url"/> <--- not rendering

<img v-bind:src="require(objectData.url)"/> <-- throws a warning error because it's not a path but an object I guess.

<img v-bind:src="{objectData.url}"/> <--- throws an error

<img v-bind:src="{{objectData.url}}"/> <--- throws an error

When I check on the dom element, it doesn't even contain a src attribute afterwards.

If I write down the URL without an object, it works.

<img v-bind:src="src/assets/images/icon.png"/>

But I want my URL to e from a parent ponent.

Any ideas on how to solve this? I added the url-loader on my webpack file:

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            }

I also attempted returning objectData.url from a puted/methods fuction:

puted: {
     getImageUrl: function() {
           return objectData.url;
     }
}

And then use it like :src=“getImageUrl” or :src=“{{getImageUrl}}” and I wasn’t lucky either.

I got a parent ponent which sends a data object to the children ponent like this:

<child object-data=" url: 'url here', title: 'Title'"></child>

Then on my children ponent, I get this object data by doing:

<script>
    export default {
        props: [
            'objectData'
        ]
    }
</script>

Now, for some reason, I can use title without any problem like this {{ objectData.title }} and shows up.

But when it es to the URL inside an img tag it's not rendering the image.

I attempted doing the following:

<img :src="objectData.url"/> <--- not rendering

<img v-bind:src="objectData.url"/> <--- not rendering

<img v-bind:src="require(objectData.url)"/> <-- throws a warning error because it's not a path but an object I guess.

<img v-bind:src="{objectData.url}"/> <--- throws an error

<img v-bind:src="{{objectData.url}}"/> <--- throws an error

When I check on the dom element, it doesn't even contain a src attribute afterwards.

If I write down the URL without an object, it works.

<img v-bind:src="src/assets/images/icon.png"/>

But I want my URL to e from a parent ponent.

Any ideas on how to solve this? I added the url-loader on my webpack file:

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            }

I also attempted returning objectData.url from a puted/methods fuction:

puted: {
     getImageUrl: function() {
           return objectData.url;
     }
}

And then use it like :src=“getImageUrl” or :src=“{{getImageUrl}}” and I wasn’t lucky either.

• javascript
• vue.js
• vuejs2
• vue-ponent

• Yes i faced the same issue before, and i didn't search a solution, but when i use url like https://picsum.photos/500/300?image=5 it works fine – Boussadjra Brahim Commented Dec 8, 2018 at 13:00
• 1 @BoussadjraBrahim oh i have to check but yes, although my images will be stored for instance in my cdn, so that works as an external url... but there has to be a way to make this work for testing purposes haha – msqar Commented Dec 8, 2018 at 13:06
• yes i'm agree with you and i have opened that project to find a solution using images stored in assets folder – Boussadjra Brahim Commented Dec 8, 2018 at 13:12
• When you examine the element on the rendered page, what is its src set to? Is it correct? – Roy J Commented Dec 8, 2018 at 14:04
• @RoyJ src attribute is pletely gone. – msqar Commented Dec 8, 2018 at 14:04

2 Answers 2

I faced the same issue and i fixed it by using require function :

in the parent ponent App.vue :

<carousel-posts :posts="posts" />

export default {
 name: "app",
data() {
  return {
   posts: [
     {
      img: require("./assets/logo.png"),
      title: "Title 1",
      subTitle: "Sub Title 1",
      body:"lorem ipsum ..."
    }
    ...
    ]
    };
   }
  ...
 }

in the child ponent i loop through the posts and bind the image src as follows :

    <div class="card-body" v-for="(post,idx) in posts" >
      <img class="card-img" :src="post.img" />
         ...
     </div>

        <script>
           export default {
            props: ["posts"],
           ...

So in your case you should have something like :

     <child :object-data="objectData"></child>

        ...
     data(){ 
          return{
            dataObject:{
              url: require('./assets/someimg.png'), 
              title: 'Title'
             }
            }
          }

Update :

my project tree :

   src
   |_assets
   |   |_logo.png
   |_ponents
   |   |_CarouselPosts.vue
   |_App.vue

Two alternatives:

1. Static links that vue resolves. But they're src-based and don't work with webpack / file-loader:

<img :src="'../assets/filename.png'"/>

2. Works with webpack. Note the ".default" at the end:

<img :src="require('../assets/filename.png').default"/>

Documentation relevant effective Nov 2019: https://github./vuejs/vue-loader/issues/1612