[Vuejs]-Critical dependency: the request of a dependency is an expression, when using v-bind

by

0👍

You have the right approach! Only a slight change is necessary:
You need to put the required() into the data part, instead of the template part.

So like this – squirel seems to be the image (btw, it is spelled "squirrel"):

<template>
  <div id="HomeListing">
    <div class="card bg-dark text-white">
      <img v-bind:src="skl" class="card-img" alt="image unavailable">
      <div class="card-img-overlay">
        <h5 class="card-title">{{title_of}}</h5>
        <p class="card-text">{{body}}</p>
        <p class="card-text">{{timestamp}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeListing',
  props: {
    src: String,
    title_of: String,
    body: String,
    timestamp: String
  },
  data: function () {
    return {
      skl: require('squirel')
    }
  }
}
</script>

Leave a comment