Path to assets from Javascript part of Vue component

Question

I need to define the path to an asset from the script section of my component, where I can't use "@/" or "../" because these just show up without being replaced in the DOM.

What is the best way of defining an asset path in the script?

<template>
  <video
    loop
    autoplay
    muted
  >
    <source :src="source" type="video/mp4">
  </video>
</template>

<script>
export default {
  props: {
    sourceFile: {
      type: String
    },
  },
  computed: {
    source () {
      return this.sourceFile || '@/assets/video/video.mp4'
    }
  },

Syed · Accepted Answer · 2020-03-24 17:33:28Z

0

Hope this helps:

<script>
// Either of the import methods should work
const theVideo = require('@/assets/video/video.mp4');
import theVideo from '@/assets/video/video.mp4';

export default {
  computed: {
    source () {
      return this.sourceFile || theVideo;
    },
  },

answered Mar 24, 2020 at 17:33

Syed

16.6k15 gold badges128 silver badges159 bronze badges

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

4 Comments

drake035 Over a year ago

Thanks! I just realised that the same problem will occur with sourceFile though, for that I can't import the asset with a path of sourceFile the way you do these imports right?

Syed Over a year ago

@drake035 if you have your file in your local dist folder and relative path - only then use my code else if you have absolute path of some url then what you are doing should simply work.

drake035 Over a year ago

Well the files with a path contained in sourceFile will be in the /assets folder just like the default video.mp4 file. And it's not working, the "@/" part in sourceFile does not get replaced by a real path, it just stays like that in the DOM so the assets isn't found...

Syed Over a year ago

Are you able to rendered some image in the way I mentioned to render video? When i used gridsome I placed video directly in ./src/assets/ path instead of ./src/assets/video/ as I had issue to rendering video from ./src/assets/video/ folder, also as you have mentioned that the sorceFile is available in /assets then why not move the video to ./static/assets/video/ folder if you are not concerned about the video being processed by webpack. You can find kinda related info here: stackoverflow.com/a/51084685/1292050

Collectives™ on Stack Overflow

Path to assets from Javascript part of Vue component

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related