CODEWITHSUNDEEP
vue.js
Bryan Enid
Bryan Enid

Reputation: 484

How to pass images url through props in vue.js

For some reason it is not working, is this correct?

Parent Component:

<achievement-post imgURL="../assets/ach1.jpg"></achievement-post>

<script>
import achievementPost from "../components/AchievementPost.vue";

// ...
</script>

Child component:

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

<script>
export default {
  props: {
    imgURL: String
  },
    // ...
}
</script>

When I hardcode the URL it works, so I'm not sure what is going on. Please help.

Upvotes: 2

Views: 4626

Answers (2)

Orden
Orden

Reputation: 611

HTML attributes are case insensitive: You should avoid using capital letters in props names. Maybe it's the cause of your problem.

<achievement-post img_url="../assets/ach1.jpg"></achievement-post>

And

 export default {
      props: {
        img_url: String
      },
        // ...
    }

You can see it at the bottom of this page: https://vuejs.org/2016/02/06/common-gotchas/ or at the top of this page: https://v2.vuejs.org/v2/guide/components-props.html

Upvotes: 0

Ricky Ruiz
Ricky Ruiz

Reputation: 26751

If you are using Webpack, there is no way for it to track the image module dependency with a string url prop, so it will not try and resolve it.

The solution is to require it with an expression.

A context is created if your request contains expressions, so the exact module is not known on compile time.

Child component:

<template>
 <img :src="require(`../assets/${imgURL}`)" />
</template>

<script>
export default {
  props: {
    imgURL: String
  },
    // ...
}
</script>

Parent component

<achievement-post imgURL="ach1.jpg"></achievement-post>

<script>
import achievementPost from "../components/AchievementPost.vue";

// ...
</script>

Upvotes: 6

Related Questions