vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)

39 篇文章 5 订阅
20 篇文章 0 订阅

前置

引入的方式

相对路径的引用

webpack的处理
  • 路径以.开头,会被 webpack 处理
  • 在其编译过程中,所有诸如
  • <img src="...">background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖

例如,url(./image.png)会被编译为require("./image.png")而:

<img src="./image.png">

将会被编译到:

h('img', { attrs: { src: require('./image.png') }})
  • 并且,会根据图片的大小来决定是否转化为base64编码图片
相对路径下的URL转换规则
  • 如果 URL 以 . 开头,它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
    • 大白话就是哪里引入的,就相当与哪一个文件的路径
  • <img src="./img/28.jpg" alt="" />就表示引入当前组件下img目录下的28.jpg文件

示例如下

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <!-- 相对路径的引入静态资源 -->
    <img src="./img/28.jpg" alt="" />
  </div>
</template>

引入的就是src/components/img/28.jpg,参照于HelloWord.vue所在的路径,也就是以src/components为起始点,去寻找img目录下的28.jpg文件

绝对路径的引用

  • 需要知道的是在vue当中,绝对路径的表示是以URL为/开头的,或是省略了/或者是.
    • 比如/images/foo.png就表示是一个绝对路径在vue当中
    • images/foo.png也表示一个绝对路径在vue当中
webpack的处理
  • 依旧会根据图片的大小来决定是否转化为base64编码图片

绝对路径下的URL转换规则
  • 绝对路径的表示是以URL为/开头的,或是省略了/或者是.

    • 比如/images/foo.png就表示是一个绝对路径在vue当中

    • images/foo.png也表示一个绝对路径在vue当中

  • 转换规则很简单,绝对路径的转换规则就是以public为起始点

    • <img src="/resource/img/pic1.png" alt="" />
    • 就表示引入public/img/pic1.png文件

示例代码如下

<template>
  <div class="hello">
    <!-- 相对路径的引入静态资源 -->
    <img src="./img/28.jpg" alt="" title="相对路径的引入静态资源" />
    <!-- url路径含有@ -->
    <img src="@/components/img/28.jpg" alt="" title="url路径含有@" />
    <!-- 绝对路径的引用 -->
    <img src="/resource/img/pic1.png" alt="" />
    <img src="resource/img/pic1.png" alt="" />
  </div>
</template>
  • 在绝对路径的引用当中
    • src="/resource/img/pic1.png"src="resource/img/pic1.png"
    • 引入的都是public/img/pic1.png文件

含有’@'路径URL的转换规则

  • 如有URL以@开头,它也会作为一个模块请求被解析,它的用户在于Vue Cli默认会设置一个执行<projectRoot>/src的别名@(仅作用于模板中)
    • 大白话说:就是看到路径有@了,就说明是项目路径/src路径为起始点了

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <!-- 相对路径的引入静态资源 -->
    <img src="./img/28.jpg" alt="" />
    <!-- url路径含有@ 二个写法都是一样的-->
    <img src="@/components/img/28.jpg" alt="" />
  </div>
</template>
  • 上面代码的示例当中
    • src = "./img/28.jpg"src="@/components/img/28.jpg"都是指向src/components/img/28.jpg的图片文件

  • 并且图片也都可以这样子引入
    • <img :src="require('@/assets/46.jpg')" alt="">

含有’~'路径URL的转换规则(主要使用好像是css里面)

  • 含有~路径URL多用于css当中
  • vue的解释
    • 如果 URL 以 ~ 开头会作为一个模块请求被解析从node_modules中引用资源。
    • 反正我是看不太懂vue的解释是什么意思…所以这里就记录下使用情况,多在css中使用

css里面,如果使用相对路径去引入图片,那没有什么区别,都会引入src/assets/26.jpg文件

<style>
.show-bg {
  /* 使用相对路径引入图片在css中 */
  background-image: url("../assets/26.jpg");
}
</style>

如果使用了绝对路径去引入图片,那么不添加~,就会报错

<style>
.show-bg {
  /* 使用相对路径引入图片在css中 */
  /* background-image: url("../assets/26.jpg"); */
  /* 使用绝对路径引入图片在css中 */
  background-image: url("@/assets/26.jpg");

}
</style>

报错信息

所以需要添加下~就可以

<style>
.show-bg {
  /* 使用相对路径引入图片在css中 */
  /* background-image: url("../assets/26.jpg"); */
  /* 使用绝对路径引入图片在css中 */
  background-image: url("~@/assets/26.jpg");

}
</style>

data当中图片数据的引入

  • 一开始我以为直接在data数据当中写图片路径就可以,然后循环,后面发现不可以
<template>
  <div>
    <div class="show-pic">
      <!-- :src="picPath" 还是require(picPath) 都不可以 -->
      <img
        v-for="(picPath, index) in imgList"
        :key="index"
        :src="picPath"
        alt="123"
      />
    </div>
  </div>
</template>
  data() {
    return {
      name: "李白",
      imgList: [
        "./assets/46.jpg", 
        "./assets/47.jpg", 
        "./assets/48.jpg"],
    };
  },
  • 后面发现需要先在data当中引入才可以
<template>
  <div>
    <div class="show-pic">
      <img
        v-for="(picPath, index) in imgList"
        :key="index"
        :src="picPath"
        alt="123"
      />
    </div>
  </div>
</template>
  data() {
    return {
      name: "李白",
      imgList: [
        require("./assets/46.jpg"), 
        require("./assets/47.jpg"), 
        require("./assets/48.jpg")],
    };
  },

总结

vue引入静态资源有相对路径绝对路径的方式

相对路径是URL开头有.

绝对路径是URL开头为/或者省略不写

相对路径相对的是当前文件

绝对路径相对的是public目录

并且引入的时候URL开头为~的使用在css里面引入静态资源的时候

如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @ 。

参考文章

https://segmentfault.com/a/1190000021485662

https://segmentfault.com/a/1190000019495695

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未成年梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值