请教大佬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的方法生成，然后以变量的形式赋值，这样就能保证打包后路径解析不会出错。