Nuxt.js: Assets use

[aleksand88]

Hi.
I'm using nuxt.js and I like it.
But have an issue with adding images through
<img v-bind:src="~assets/img/image-name.jpg">
I'm getting path to images from data array of objects.
When I'm using /static <img v-bind:src="/img/image-name.jpg">it works fine.
How can I use assets with data from objects? Can you please help me with this?

_{This question is available on Nuxt.js community (#c272)}

[stursby]

@aleksand88 You don't need to v-bind:src in this case. You can simple use:

<img src="~assets/img/image-name.jpg">

[aleksand88]

Thanks.
Sorry, I've made a mistake. Here is more details:
I'm using data like this part:
products: [ { id: 1, imgSrc: 'img/product-img-1.jpg', } ]
Then in *.vue I'm using
<img v-bind:src="product.imgSrc">
(v-for is added in code too in block above img tag). It's works fine, because images are in /static/ folder.
But how can I use images from /assets folder for binding data from object? I thought something like this one:
products: [ { id: 1, imgSrc: '~assets/img/product-img-1.jpg', } ] but it's not.
Can you help me with this one please?

[stursby]

@aleksand88 How about like this? (Assets vis the Docs)

<template>
  <div>
    <ul>
      <li v-for="user in users">
        <img :src="require(`~assets/${user.avatar}`)" alt="avatar">
        <p>{{ user.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Charlie', avatar: 'avatar1.jpg' },
        { name: 'Ben', avatar: 'avatar2.jpg' },
        { name: 'Nick', avatar: 'avatar3.jpg' },
        { name: 'Steve', avatar: 'avatar4.jpg' }
      ]
    }
  }
}
</script>

And my assets/ dir:

[aleksand88]

@stursby , thanks. It works!

[aleksand88]

I found some warnings in browser console after using ~assets for images - screenshot is here
Can you please tell me what this could be?

[stursby]

@aleksand88 Hmmm, I'm not seeing any Console warnings. Are you getting these warning after running nuxt and then opening http://localhost:3000/? Could you share your code? Hard to say without seeing it.

[aleksand88]

Thanks, yes, I'm opening it on localhost. Here is code:
nuxt.config.js

`module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,500,600,700' }
    ]
  },
  css: [
    'bootstrap/dist/css/bootstrap.min.css',
    'font-awesome/css/font-awesome.min.css',
    { src: '~assets/css/main.scss', lang: 'scss' }
  ],
  env: {
    products:
    [
        {
            id: 1,
            name: 'product-1',
            imgSrc: 'img/product-img-1.jpg'
        },
        {
            id: 2,
            name: 'product-2',
            imgSrc: 'img/product-img-2.jpg'
        },
        {
            id: 3,
            name: 'product-3',
            imgSrc: 'img/product-img-3.jpg'
        }
    ]
  }
}`

index.vue

<div v-for="product in products">
  <div class="inner">
    <nuxt-link class="text-center" :to="'/product/' + product.id" style="display: block;">
      <img class="img-responsive" v-bind:src="require(`~assets/${product.imgSrc}`)">
    </nuxt-link>
    <div class="product-header text-center">
      <nuxt-link :to="'/product/' + product.id">{{ product.name }}</nuxt-link>
    </div><!--product-header-->
  </div><!--inner-->
</div>
<script>
export default
  {
    data ({ env }) {
      return {
        products: env.products
      }
    }
  }
</script>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.