请教大佬VUE打包的时候video的poster图片路径错误

Question

1、打包后video下的poster的图片路径一直报错，没打包的时候 通过8080端口访问的时候是正常的。2、这是代码<div class="videoWrap" v-if="news.ShowType==3" @click="jumpNewsDetails(news.ShowType,news.SKID)">                              <video class="video"                                         :class="`${page.SKID}video${clickLikenewsIndex}`"                                         width="320"                                         height="240"                                         controls                                         webkit-playsinline="true"                                         playsinline="true"                                         :poster="news.News_Video_Pic ? news.News_Video_Pic :'../../static/img/television.png'">                                  <source :src="news.News_Video" type="video/mp4">                                  您的浏览器不支持 video 标签。                              </video>                           </div>·以下是通过8080端口访问的·以下是打包后的结果

Answer 1

开发模式下是以当前.vue文件的路径作为相对路径查找的，所以你写'../../static/img/television.png'可以查找到，但是打包后是以我们的html文件为相对路径，这时候我们的页面(html文件)和static文件夹是同一路径，所以这里你可以写成'./static/img/television.png'查找失败。

一般的都会把图片路径用import的方法生成，然后以变量的形式赋值，这样就能保证打包后路径解析不会出错。