I have created an Array with three objects and a loop over it in my template. It is working fine for getting other data and src data but it is not showing my images. Does anybody what should i do?

sandbox link to my project

And here is my template code

<div
  
  @click="selectBox(item.id)"
  v-for="item in boxData"
  :key="item.id"
  :
>
  <p>{{ item.name }}</p>
  <img :src="item.src" width="60" alt="" />
  src: {{item.src}}
</div>

My data

boxData: [
    { id: 1, name: "object 1", src: "@/assets/power(1).png" },
    { id: 2, name: "object 2", src: "@/assets/power(1).png" },
    { id: 3, name: "object 3", src: "@/assets/power(1).png" },
  ],

CodePudding user response：

Solution 1: If you don't want to use Webpack assets from the assets directory, you can add the images to the static directory.

In your code, you can then reference these files relative to the root (/):

<!-- Static image from static directory -->
<img src="/my-image.png" />

<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />

Nuxt doesn't change this path, so if you customize your router.base then you'll need to make sure to add that manually to your paths. For example:

<img :src="`${yourPrefix}/my-image.png`" />

Solution 2: When working with dynamic images you will need to use require

 <img :src="require(`~/assets/img/${image}.jpg`)" />

Image not displaying in loop Vue.js

CodePudding user response：

<img :src="require(`@/assets/${item.src}`)" width="60" alt="" /> src: {{ item.src }}

It worked like this