404 error on images and video

[adavie1]

Hi, great component! However, I'm having some difficulty getting the component to load both the image and the video.

I'm using the build system so *.vue files and the yarn build for production. However I'm testing under hot deploy.

Folder structure:

[src]
----/assets
----/components etc.

To access a regular image, this works: <img style="height: 4.32em; padding-bottom: 0.8em;" src="../assets/client.png" alt="logo">

However, when I pass the same paramters to video-bg, I get 404 errors on both the video and image. My code is like this:

<video-bg :sources="['../assets/bg-video.mp4']" img="../assets/bg-image.png" />

I've tried all sorts of variants. I suspect because it's the video-bg component stored in a different subdirectory (node_modules) the relative reference is breaking. I just don't want to have such hack to have fixed paths to your component, since that might change in the future.

I've also tried: '~/assets...' and '@/assets...' and '/assets...' all fail with a 404.

Any pointers would be greatly appreciated. Thanks

[sachinbapure]

Hi,

Is this issue resolved. I am having the same issue. All the paths, I have tried. NO USE.

Please let me know if any solution works.

[el-jacko]

If somebody has still this problem, you can do this:

<video-bg :sources="[path]" img="@/assets/bg.jpg">
     <!-- If you want to add content here, a slot is waiting! -->
</video-bg>

data () {
   return {
     path: require('@/assets/video.mp4')
   }
 }