Vue.js v-for do no render image [duplicate]

Question

I'm trying to render four images using v-for with a range, 1 to 4. v-for="n in 4" :key"n" But, using 'n' as part of src does not work. Why?

 <div v-for="n in 4" :key="n">
    <img
       :src="`../assets/images/image-product-${n}-thumbnail.jpg`"
       class="rounded-xl h-16 w-16 hover:cursor-pointer"
    />
 </div>

Tried using 'key' instead of 'n', converting 'n' to string... none worked

If I hardcorde like this, it works

<img
      src="../assets/images/image-product-1-thumbnail.jpg"
      class="rounded-xl h-16 w-16 hover:cursor-pointer"
 />

The error I get is: GET localhost:3000/assets/images/image-product-4-thumbnail.jpg [HTTP/1.1 404 Page not found: /assets/images/image-product-4-thumbnail.jpg 731ms] — Ricieri
– Ricieri, Commented Jan 8, 2024 at 13:11
Well, the problem is not related to vue or v-for. Vue is doing what you told him to, as the URL is the error is right. Actually, the error hints you toward what the problem is : the image was not found on your local server. — Billuc
– Billuc, Commented Jan 8, 2024 at 13:20
Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3]. In the case you're using Vue 3 + Vite please see this question and answer. The problem is not that the URL is incorrect, but that Vite needs specific help in analyzing dynamic URLs — yoduh
– yoduh, Commented Jan 8, 2024 at 14:56

Dalía Macias · Accepted Answer · 2024-02-15 05:02:59Z

0

I had the same issue, but the problem is not the path or the @ in the path, I've tried this:

    <img class="product-listed" :src="`${product.src}`">

    <button @click="navigateTo(product.id)" class="add-to-cart">Añadir al carrito</button>
   <h4> {{product.name }}</h4>
   <p>{{ product.precio }}</p>
</div>

And in the browser DOM this is what I see:

If I place an image manually with the same path, it shows up, but when is inside a dinamically path (v-for) coming from the API, the image does not show up. By the way Im using Vue JS version Option API.

Also I've tried: :src="require(${product.src})" where the product.src is declared in the JSon (API) like following: { "name":"product1", "src":"../assets/img/product2.png", "precio":"15.50", "categoryID":1, "id": "1" },

And if I console log the product, it has the right path. and properties. It works on my local enviroment, maybe it could help you

edited Feb 15, 2024 at 5:02

answered Feb 12, 2024 at 16:35

Dalía Macias

13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tao Over a year ago

Please do not use answers to say you have the same problem/question. Only use answers to post actual solutions/answers to the question being asked.

Raphael Rlt · Accepted Answer · 2024-01-08 16:34:47Z

-2

If you have a global aliases (@) available i recommend you to use it.

Because using relative path can works in local for example but when the project is compile (build) the related path can be broken.

When using dynamic src path you can require it before loading.

With the aliases you can do:

:src="`require(@/assets/images/image-product-${n}-thumbnail.jpg`)"

answered Jan 8, 2024 at 16:34

Raphael Rlt

6717 silver badges20 bronze badges

Collectives™ on Stack Overflow

Vue.js v-for do no render image [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related