Parallax can't find image - based on the parallax demo project
See original GitHub issueSteps 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
Issue Analytics
- State:
- Created 6 years ago
- Comments:14 (6 by maintainers)
Top GitHub Comments
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 Hi, I noticed that if I move the assets folder to /public then it will work. Is this information helps ?