Question

这是我的数据

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

这是我的组件：

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

当我在视频src中硬编码路径（'../../assets/src/homepage.mp4'）时，它可以工作。

当我尝试从数据传递路径时，它无法呈现。页面本身没有错误，除了背景视频应该位于空白画布之外。

这是奇怪的部分–当我将路径硬编码到视频src中时，检查元素将呈现路径like so。但是，这实际上可以正常工作并将视频呈现到页面上。

当我尝试通过数据传递路径时，它会呈现路径like this，而无法在页面上呈现。

Answer 1

您的应用是使用webpack构建的，该webpack配置为file-loader，用于将模板源中的引用资产复制到目标文件夹，并且src路径替换为新文件的路径。当src绑定到一个动态值时，webpack在生成时不知道资产文件是什么，因此不会进行任何转换，并且在运行时将src设置为../../assets/src/homepage.mp4，但是在那里是webpack-dev-server（在开发模式下运行应用程序时运行的开发Web服务器）在该位置没有文件的文件。

您需要通过使用代码导入模块（使用require或ES6 import来告诉webpack加载资产：

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

vuejs组件视频路径未从数据呈现

1 个答案: