How to pass imageUrl as props? - vue.js

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

Answer 3

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.

Answer 4

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