[Vuejs]-Vue @/src/assets/images/1.jpg: hasn't been transpiled yet error

by

0👍

✅

You want to require the images upfront.

export default {
  name: "App",
  data() {
    return {
      sliderItems: [
        { id: 1, name: "img1", img: require("@/assets/images/1.jpg") },
        { id: 2, name: "img2", img: require("@/assets/images/2.jpg") },
        { id: 3, name: "img3", img: require("@/assets/images/3.jpg") },
      ],
    };
  },

Then update the carousel item component.

  <div class="v-carousel-item">
    <img :src="item_data.img" alt="" />
  </div>

Example: https://codesandbox.io/s/little-bush-ino5zc?file=/src/components/v-carousel-item.vue:11-91

Leave a comment