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.

Answer 1

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.

Answer 2

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`)" />