Vuetify: Parallax can't find image - based on the parallax demo project

[gfelot]

Steps to reproduce

I setup a new project with vue init vuetifyjs/webpack-advanced and adding the Parallax demo. I wanted to split each parts (header/footer/sections) as standalone components.

The 2 sections with the parallax cannot find the source image. I have two 404 errors on the console.
I'm sure about the relative path I put because the main LOGO has the same base path than the two others and it rendered (../assets/vuetify.png vs ../assets/hero.jpeg, see below)

Versions

Vue : 2.4.2
Vuetify: 0.15.0
MacOS: 10.12.6
Chrome: 60.x

What is expected ?

Can see the source img in the 2 parallax sections.

What is actually happening ?

Can't see the source img in the 2 parallax sections.

Reproduction Link

I don't know how to give you reproduction link so here the code I have.

img available on /src/assets/hero.jpeg

/src/components/Hero.vue

<template>

  <div class="">

    <section>
      <v-parallax src="../assets/hero.jpeg" height="600">
        <v-layout column align-center justify-center class="white--text">
          <img src="../assets/vuetify.png" alt="Vuetify.js">
          <h1 class="white--text mb-2 display-3">Golf Watcher</h1>
          <div class="headline mb-3 text-xs-center">Powered by Vuetify</div>
          <v-btn class="blue lighten-2 mt-5" dark large href="/pre-made-themes">
            Get Started
          </v-btn>
        </v-layout>
      </v-parallax>
    </section>

  </div>

</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped>

</style>

Do you think the issue is here because of vue-router that cannot give the path or something ?

EDIT: I made a test. If I just change the <v-parallax> for a <img> I have the img. So there is a real problem with the src props of v-parallax

[johnleider]

This is essentially the same as #1239 for future me.

[gfelot]

I'm still with npm run dev compared to this issue.
And the quick fix :src="require('@/assets/hero.jpeg')" load only half of the image.

EDIT: An hard refresh make my img the correct size ;)

[johnleider]

Going to close this as a duplicate of #1239 since it is really the same thing after digging in. I've requested help on the other ticket as well since this is a conflict with vue-loader and how it handles assets.

[esodot]

Thanks now its working, took me just 2 hours to find it :)

[gileneusz]

please make a comment on template project file that this bug occurs, It's almost half a year and this is not fixed yet, and I wasted an hour to find this page and solution, thanks!

[johnleider]

@gileneusz you mean like in the Frequently Asked Questions section?

Even just using the search in the docs yields a result:

This information could be present in other areas, sure, and we welcome any PR's that help make the project better. In terms of triage though, we have added information to help users.

edit. Also, this isn't really something to do with fixing, this is simply how vue-loader interacts with compiling these assets. Since v-card-media, for example, is not a regular img, it doesn't get picked up. If there is some hidden solution that the entire team has missed all of this time, definitely would love to see it.

[gileneusz]

I need more practice with the search button and I should reed more documentation. Anyway, the same problem is with Selects -> Scoped slots. It's not trivial for new users, they want all out of the box. However this framework is great. At this time that's the only major problem I've faced using it.

[johnleider]

We need to update our documentation and my response was not very professional, so I apologize. I'll work on this tonight, thank you for your patience.

[kyriediculous]

@johnleider Sorry I'm having a bad day, my comment wasn't very friendly.

What i mean is that it's kind of ... a not so short workaround to make a separate function and having to pass it as props to every child component that needs to use an image from assets.

Of course I could just cdn all images but yeah... who does that in development.

[johnleider]

I'll do some research for the best patterns or already implemented
practices to handle this. It has unfortunately always been low on triage
for me and it is very hard to meet the needs of every developer.

This doesn't mean we cannot do better and I'm always on the lookout for
individuals to help with contribution.

On Tue, Mar 27, 2018, 4:52 PM kyriediculous [e-mail]
wrote:

Sorry I'm having a bad day, my comment wasn't very friendly.

What i mean is that it's kind of ... a not so short workaround to make a
seperate function and having to pass it as props to every child component
that needs to use an image from assets.

Of course I could just cdn all images but yeah... who does that in
development.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/1656#issuecomment-376688060,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOghmURUf_D4fSbpumVs_zIK5UX8Q8ks5tirSggaJpZM4PSW7-
.

[kyriediculous]

Using a method threw an error for me by the way.
Directly using :src="require('../assets/img.png') did work
However I ran into issues when trying to resize my overly large image so I abolished using v-parallax for now and made my own parallax class

 .parallax {
    background-image: url('../assets/hero.jpg');
    background-size:cover;

    /* Set a specific height */
    min-height: 100vh;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

[dohomi]

I did a little bit of research: only Chrome (and Opera) browser can handle :src="someLazyLoadedImgSrc" correctly, all other browser will fail showing an incomplete half-sized image. Seems that the other browsers fire the load event too early.

@johnleider you closed this issue doe to a duplicate but I think its rather an issue how the mixin translatable is calculating the size of parallax.

Here is a reproduction: https://codepen.io/anon/pen/mLWjEy You can open this in several browser and Firefox/Edge/Safari will show an incomplete container while Chrome can handle the src to be dynamic.

[cecilang]

if your parallax is not functioning, import VParallax in main.js and then add it to the components object in the "Vue.use" function as per the example below:

(in main.js):

import {
Vuetify,
...
VParallax,
transitions
} from 'vuetify'
...
Vue.use(Vuetify, {
components: {
VApp,
...
VParallax,
transitions
}

[rondaniel00]

@johnleider
Hi,
I noticed that if I move the assets folder to /public then it will work.
Is this information helps ?