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

qngyun1029
  • 742

某日在网上瞎逛,看到一个站点的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,如何替代这种方案呢?

回复
阅读 2.8k
2 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏