Question

问题是，如果资产的路径和资产名称作为道具通过，如何使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>>)的可能性，但是如果在 computing 函数上使用，则似乎无法使用。 return require (this.path+""+this.file);

有什么想法可以使它正常工作吗？

Answer 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文件夹位于其他位置，则应使用@/或./符号创建正确的路径，以正确访问文件。

动态创建资产路径

1 个答案: