Image in VueJS component is not loading

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.com/vuejs/vue-loader/issues/1612

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

in the parent component 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 component 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
   |_components
   |   |_CarouselPosts.vue
   |_App.vue