-1

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'
    }
  },
drake035
  • 3,955
  • 41
  • 119
  • 229

1 Answers1

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;
    },
  },
Syed
  • 15,657
  • 13
  • 120
  • 154
  • 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? – drake035 Mar 24 '20 at 17:58
  • @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. – Syed Mar 24 '20 at 18:25
  • 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... – drake035 Mar 24 '20 at 18:33
  • 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: https://stackoverflow.com/a/51084685/1292050 – Syed Mar 25 '20 at 02:51