0

I'm trying to import my images, but i get couldn't find module or failed to load resources. I've used the require function, but it doesn't work too!

`<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <h2>{{ product.title }}</h2>
      <img :src="product.link" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          title: "cotton",
          link: `./assets/images/cotton.jpg`,
          id: 1,
        },
        {
          title: "purse",
          link: "./assets/images/purse.jpg",
          id: 2,
        },
        {
          title: "leather",
          link: "./assets/images/leather.jpg",
          id: 3,
        },
        {
          title: "wallet",
          link: "./assets/images/wallet.jpg",
          id: 4,
        },
      ],
    };
  },
};
</script>

<style></style>`

images are in the root directory @/assets/images/*.jpg

  1. I have used require function it didn't work
  2. tried both absolute and relative path for src attribute
soroush mohamadi
  • 1
  • 1
  • Whats your configuration of vue.config.js ? You should have a property assetsDir with '/assets' as value and in your component you show the images with link: '/images' – Andoni Jun 23 '23 at 08:45
  • this is my vue.confing.js and i also add assetsDir as you mentioned, const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, assetsDir: "./src/assets", }); – soroush mohamadi Jun 23 '23 at 09:16

0 Answers0