vue3引入静态资源

引入图片资源

img引入图片资源

  这里的width与height都不能带单位
  // public下的image文件夹
  <img src="/image/admin.png" width="20">        // <-绝对路径
  // src下的assets文件夹
  <img src="@/assets/image/PE.png" width="20">   // <-相对路径
  // 目录如下
  |-public
  | |-image
  |   |-admin.png
  |-src
  | |-assets
  |   |-image
  |     |-PE.png

background-image引入图片

admin.vue
--------------------------------------------------------
.adminsvg {
    width: 200px;
    height: 200px;
    //  绝对路径引入
    background-image: url(@/assets/image/PE.png); 
    //  相对路径是字符串也可以
    background-image: url("@/assets/image/PE.png"); 
    //  相对路径引入
    background-image: url(../assets/image/PE.png); 
    //  相对路径是字符串也可以
    background-image: url("../assets/image/PE.png"); 
  }
  目录
  |-public
  | |-image
  |   |-admin.png
  |-src
  | |-assets
    | |-image
    | |-PE.png  
    |
    |-views
      |-admin.vue

引入SVG图标

使用的是阿里巴巴图标库,下载素材,使用的是symbol

<template>
<div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-tushu"></use>  <-使用
    </svg>
</div>
</template>

<script>
import("@/assets/iconfont/iconfont.js")       <- 引入需要的js文件
export default {
  name: "admin",
};
</script>

<style scoped>                 <- 对应的css样式
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

什么时候使用~@与@

<template>
<div>
  <img src="~@/assets/image/PE.png">     ~@ 可以
  <img src="@/assets/image/PE.png">       @  可以
  <img src="../assets/image/PE.png">     相对路径可以
  <img src="/image/admin.png"">          public绝对路径可以
  <div class="adminsvg"></div>
</div>
</template>

<script>
// import("~@/assets/iconfont/iconfont")              ~@ 不可以
import("@/assets/iconfont/iconfont.js")                @  可以
import("../assets/iconfont/iconfont")                  相对路径可以
// import("/iconfont/iconfont")                        public绝对路径不可以
</script>

<style scoped>                
@import url("~@/assets/css/register_style.css");        ~@ 可以
@import url("@/assets/css/register_style.css");         @ 可以
@import url("../assets/css/register_style.css");        相对路径可以
// @import url("/css/register_style.css");              public绝对路径不可以

.adminsvg {
    background-image: url("~@/assets/image/PE.png");     ~@ 可以
    background-image: url("@/assets/image/PE.png");       @ 可以
    background-image: url("../assets/image/PE.png");     相对路径可以
    // background-image: url("/image/PE.png");           public绝对路径不可以
}
</style>

• @ 把它当做src文件夹的别名
• ~@ 可以加载静态资源(图片与css),也可以加载node-modules中的资源,不可以加载JavaScript与typescript