网站地图    收藏   

主页 > 前端 > vue教程 >

详解Vue.js中引入图片路径的几种方式

来源:自学PHP网    时间:2019-07-23 15:24 作者:小飞侠 阅读:

[导读] 详解Vue.js中引入图片路径的几种方式...

vue --version 3.6.3vue中静态资源的引入机制
牴俜轿牡袋/a>

  • 诸如?lt;img src="..."> 、燽ackground: url(...) 和燙SS @import 的资源
    • 如果 URL 是一个绝对路径,例如?images/foo.png ,它将会被保留不变。
      vue-path/
      
      ----- public/
      
      -------- images/
      
      ------------ XX.jpg
      
      ----- src/
      
      -------- assets/
      
      ------------ images/
      
      ---------------- XX.jpg
      
      -------- App.vue
      
      ...
      
      

      1、√

       // √
      // 编译后:
      
      
      

      2、×

       // ×
      // 编译后:
      
      
      

      3、√

       // √
       // √
       // √
      
      // 编译后:
      
      
      

      4、≈

       // -
      // 编译后:
      
      
      

      当你的应用被部署在一个域名的根路径上时,比如爃ttp://www.abc.com/ ,此时这种引入方式可以正常显示

      publicPath 是部署应用包时的基本 URL,在爒ue.config.js 中进行配置,详情参阅牴俜轿牡袋/p>

      5、√

       // √
      // 编译后:
      
      
      
      
      //vue.config.js
      module.exports = {
       publicPath:'/foo/',
       ...
      }
      
      

      reference
      https://cli.vuejs.org/zh/guide/html-and-static-assets.html#处理静态资源https://cli.vuejs.org/zh/config/#publicpathhttps://www.jb51.net/article/124718.htm

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论