Good vs Bad Way of Rendering image

RenderImage.vue

<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>