vue.js项目，关于首页 index.html 刷新无法获取图片路径的问题?

Question

某日在网上瞎逛，看到一个站点的loading动画，感觉甚好，禁不住诱惑，而是借过来用用！哈哈！！

于是有了下面这段代码

index.html 代码如下：

    <div id="app">
      <div class="app-loading-wrap">
          <div class="ani-wrap">
              <img class="app-loading" src="./static/images/main-loading.gif" alt="">
          </div>
          <span>loading...</span>
      </div>
    </div>

注：gif加载动画放在static文件夹里面

问题：在首页刷新的时候，loading能够正常显示；当进入到内页，刷新页面时，gif请求为404;
原因：首页或者登陆页对应的url为（http://localhost:5050/、http://localhost:5050/login）,

请求图片地址为：

图片路径为：

内页（登陆后的管理页）对应的url为http://localhost:5050/mgmt/annc，

请求图片地址为：

图片路径为：

改怎么修改呢？
1、处理index.html里面的路径问题？如何处理？
2、加载动画不放到index.html，如何替代这种方案呢？

Answer 1

既然在static 目录下，就换成绝对路径吧

<img class="app-loading" src="/images/main-loading.gif" alt="">

Answer 2

你把加载动画单独写成一个组件，通过app.vue引入