Skip to content

Instantly share code, notes, and snippets.

@rlam3 rlam3/RenderImage.vue
Last active Jul 27, 2019

Embed
What would you like to do?
Good vs Bad Way of Rendering image
<template>
<div>
<div>
<div v-for="(panel, index) in panelList" :key="index" class="panel">
<img class="" :src="panel.imagePath" /> /// Approach 1
<img class="" :src="require(panel.imagePath2)" /> /// Approach 2 WRONG!!! WEBPACK HATES YOU
<div class="">
<div class="">
{{ panel.title }}
</div>
<p class="">
{{ panel.description }}
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
panelList: [
{
title: 'Panel 1',
imagePath: require('~/assets/img/my_image.png'), /// Approach 1
imagePathAlt: 'https://google.com/images/my_image.png', /// Approach 1 using external API calls
imagePath2: '~/assets/img/my_image.png', /// Approach 2
description:
'Lorem ipsum etc...'
},
...
]
}
}
}
</script>
<style lang="sass" scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.