动态创建资产路径答案

【问题标题】：Creating a path to an asset dynamically动态创建资产路径
【发布时间】：2019-11-25 22:25:30
【问题描述】：

问题是如果资产的路径和资产名称作为道具传递，如何让 Vue 呈现资产的正确路径。

说明：
使用 Vue 组件时...如果传入包含要加载资产的路径和文件名的道具

export default{
   name: 'NewComponent',
   props: ["path","file"],
   computed:{
      calculateCompletePath (){
         return this.path+""+this.file;
      }
   }
}

如果以如下方式使用类似上述内容：

<template>
  <div>
     <video>
        <source :src="calculateCompletePath" type="video/mp4"/>
     </video>
  </div>
</template>

如何让 src 部分正确呈现 - 例如 Vue 生成自己的字符串，例如引用媒体文件夹

/media/movie.6ac43bcf.mp4

旁注：
我在某处读过有可能使用require (<<asset>>)，但如果在 computed 函数上使用它似乎不起作用，例如return require (this.path+""+this.file);

任何想法如何让它工作？

【问题讨论】：

mp4 文件在您的文件夹结构中的什么位置？是在src 文件夹下还是其他地方？

标签： vuejs2 vue-component

【解决方案1】：

有关如何解析静态资产的详细说明，请参阅此文档： https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports

我认为问题在于您的资产（在本例中为 mp4 文件）不在您计算机的 /media 文件夹中。

查看这 3 点以获得更好的理解：https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

如果您的 media 文件夹位于根文件夹 (/) 下，则计算值 /media/movie.6ac43bcf.mp4 将起作用。
如果您的media 文件夹位于应用程序的src 文件夹下，您的计算属性应返回@/media/movie.6ac43bcf.mp4
如果您的media 文件夹位于其他位置，那么您应该使用@/ 或./ 符号创建正确的路径以正确访问该文件。

【讨论】：