vue.js 如何将v-for元素分配给HTML视频源？

yzxexxkh 于 2022-11-30 发布在 Vue.js

关注(0)|答案(1)|浏览(118)

我试图在我的v-for循环中为每个项目获取不同的视频，但它不起作用。

<section v-if="loaded" class="port-content">
      <div class="item-box reveal" v-for="item in this.items" v-bind:key="item.title">
        ...
        <div class="item-vid-wrapper">
          <video controls>
            <source :src="item.vidPath" type="video/mp4">
          </video>
        </div>
      </div>
    </section>

项目中的vidPath变数是'../assets/homeVid.mp4'。
通常，在src元素中设置路径会从这个.vue文件所在的文件夹开始。因此，如果我的路径是..“/assets/homeVid.mp4”，它会转到父文件夹并进入assets文件夹。这成功地将homeVid.mp4视频设置为所有的v-for元素：

<source src="../assets/homeVid.mp4" type="video/mp4">

当我尝试使用item.vidPath动态设置它时，它似乎向localhost发出GET请求，忽略'..'，并尝试从那里找到视频：

如何将item.vidPath分配给video src，就像我对路径进行硬编码一样？

vue.js

来源：https://stackoverflow.com/questions/74609062/how-do-i-assign-a-v-for-element-to-an-html-video-src

1条答案

按热度按时间

pcww981p1#

想通了！
如果我将项目.vidPath设置为“@/assets/homeVid.mp4”并执行以下操作，则无法正常工作：

:src="require(item.vidPath)"

但是，如果item.vidPath正好等于'homeVid.mp4'，并且字符串的开头是硬编码的，则它可以工作：

:src="require('@/assets/' + item.vidPath)

因此，在v-for循环中，它看起来像这样：

<section v-if="loaded" class="port-content">
      <div class="item-box reveal" v-for="item in this.items" v-bind:key="item._id">
        <div class="item-info-wrapper">
          <h2>{{ item.title }}</h2>
          <div class="tag-row">
            <h3 v-for="tag in item.tags" v-bind:key="tag">{{ tag }}</h3>
          </div>
          <p>{{ item.description }}</p>
           <a href=item.repoLink></a>
        </div>
        <div class="item-vid-wrapper">
          <video :src="require('@/assets/' + item.vidPath)" type="video/" controls>
          </video>
        </div>
      </div>
    </section>

赞(0）回复(0）举报 2022-11-30

我来回答

vue.js 如何将v-for元素分配给HTML视频源？

1条答案

相关问题

热门标签

最新问答