[Vuejs]-Vuejs component video path not rendering from data

by

0👍

✅

Your app is being built with webpack which is configured with file-loader to copy referenced assets in the template source to a destination folder and the src path is replaced with the path to the new file. When src is bound to a dynamic value, webpack can’t know what the asset file is at build time, so no transformation occurs, and at runtime src is set to ../../assets/src/homepage.mp4 but there is no file at that location being served by webpack-dev-server (which is the development web server that runs when you run your app in development mode).

You need to tell webpack to load the asset by importing the module in code (either with require or ES6 import):

data() {
  return {
    main: {
      bgVideo: require('../../assets/src/homepage.mp4'),
    }
  }
}

Leave a comment