How to pass imageUrl as props?

Question

Here is my component. It takes a props imageUrl which is String referring either an image from a URL or a reference to a local asset from the assets folder

<template>
    <div class="flex" style="height: 155px;align-items: center">

        <div class="avatar" style="height: 130px;width: 130px">

            <img :src="require(`imageUrl`)" height="130" width="130" style="border-radius: 50%"/>

        </div>
        <div class="flex flex-column" style="margin-left: 31px">

            <div class="flex" style="font-weight: bold">

                {{fullName}}
            </div>
            <div class="flex" style="">
                {{title}}
            </div>

            <div style="height: 20px"></div>

            <div class="flex" style="text-align: start">

                {{content}}

            </div>


        </div>

    </div>
</template>

<script>
    export default {
        name: "ReviewTile",
        props: {
            imageUrl: String,
            fullName: String,
            title: String,
            content: String

        }
    }
</script>

<style scoped>

</style>

I use it like this:

<ReviewTile
        image-url="../assets/Eugene.png"
        full-name="Eugene B.
"
        title="UI/UX Designer."
        content="   Christabel is one of the business world’s truly great deal makers and strategists, easily on par with
the best of the strategy consultants and designers I have worked with at SOS-HGIC and Kleio. She is also
a world-class human being."

></ReviewTile>

<div style="background-color: #b7b7b7;height: 1px; margin: 33px 0px"></div>

<ReviewTile
        image-url="../assets/headshot_black1.png"
        full-name="Gilliam D."
        title="Web designer/Developer"
        content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."

></ReviewTile>

But images are not loading.

Sara Live · Answer 1 · 2019-12-12T13:22:45.947

There is a strange JS bug that breaks proper image loading (sry, I forgot what it was, but I found the solution on stackoverflow a while ago).

What helps is breaking the image request up like this:

:src="require('@/assets/' + imageName + '')"

So you only have your image name in the prop and load it without the curly brackets. Now you also don't have to worry about the correct path. The @ will find the correct folder.

If anyone can explain the technicalities of this better or finds the other thread with the solution, please feel free to expand on my answer.

Edit: First part of the explanation: Webpack can't work with only a variable as path, because then it would have to go over potentially thousands of files. So you have to have the @/assets/ part as text. Explained more nicely here: Vue.js dynamic image src with webpack require() not working

Couldn't find yet why the curly brackets don't work.

score 5 · Answer 2 · answered May 10 '19 at 20:28

If all your images are in the same folder your can just pass the file name as props:

<ReviewTile
  image-url="Eugene.png"
  ...
></ReviewTile>

<ReviewTile
  image-url="headshot_black1.png"
  ...
></ReviewTile>

Then in the ReviewTitle component, require the imageUrl with the assets path:

<div class="avatar">
  <img :src="require(`../assets/${imageUrl}`)" />
</div>

Note:
If all the images have the same extension .png you can even just write the file name like image-url="Eugene" and in the component: <img :src="require(`../assets/${imageUrl}.png`)" />

gokublack · Answer 3 · 2019-05-10T18:49:03.090

0

if you are sending the path of the image in the url, then you can use the props directly,

but make sure you are providing the right path to the image.

 <img :src="imageUrl" height="130" width="130" style="border-radius: 50%"/>

also change your prop name in the other component

// Wrong
<ReviewTile
        image-url="../assets/Eugene.png"
        full-name="Eugene B.

// correct one would be something like this
<ReviewTile
        :imageUrl="../assets/Eugene.png"
        full-name="Eugene B.

edited May 10 '19 at 18:49

answered May 10 '19 at 18:30

gokublack

1,260
2
15
36

I have tried that first. It is not working I am sure the path is correct "../assets/headshot_black1.png" – TSR May 10 '19 at 18:42
did you test with an external image that is outside your local project folder image? – gokublack May 10 '19 at 18:45
also props should be exactly same, it seems you have ` – gokublack May 10 '19 at 18:46
it is not working. I tried everything you said. I noticed using the developer console that every other assets loads in a different path – TSR May 10 '19 at 19:42
Thanks! But the – gtamborero Apr 05 '20 at 22:44

score 0 · Answer 4 · answered Nov 23 '20 at 16:36

For those using Nuxt.js for the Vue apps - there is simple solution using static folder instead of assets.

The key difference between these two folders is that static is not compiled by Webpack - therefore you are free to use variables as you please.

See the docs:

https://nuxtjs.org/docs/2.x/directory-structure/static

How to pass imageUrl as props?

4 Answers4