vue-cli3 圖片路徑

引入圖片的方式

圖片路徑用 ******* 代替

<template>
  <div>
    1.<img src="*******" alt="">
    2.<img :src="img" alt="">
    3. <div class="box imgurl"></div>
    4. <div class="box" style="background: url(*******);"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      img:`*******`
    }
  }
}
</script>

<style scoped>
.box{
  height: 200px;
  width: 200px;
  display: inline-block;
}
.imgurl{
 background: url(*******);
}
</style>

項目目錄

├── public
│   ├── favicon.ico
│   ├── index.html
│   └── static
│       └──  logo.png   圖片
├── src
│   ├── App.vue
│   ├── assets
│   │  └── logo.png     圖片
│   └── views
│       ├── Home.vue
│       └── practice-center
│           └── test
│               └── index.vue   測試
└── yarn.lock

vue.config.js配置

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? '/my-vue-admin/' : "/"
};

public/static 絕對路徑引用

1. 使用相對路徑static/logo.png

• 本地測試 , 部署測試 , 1、2、4 好使，3 不好使（會報錯,測試須將其註釋掉）。

---

2. 使用絕對路徑/static/logo.png

• 本地測試 ，均好使。
• 部署測試

  • 根目錄下,均好使;

  • 非根目錄下,均不好使;

  • 非根目錄下,須這樣使用

    data () {
      return {
        publicPath: process.env.BASE_URL
      }
    }
    

    然後：

    <img :src="`${publicPath}my-image.png`">
    

何時使用 public 文件夾

你需要在構建輸出中指定一個文件的名字。
你有上千個圖片，需要動態引用它們的路徑。
有些庫可能和 webpack 不兼容，這時你除了將其用一個獨立的

src/assets 相對路徑引用

1. 相對路徑 ../../../assets/logo.png

• 本地測試,部署測試 1,3 好使

• 2 、4修改成

  <template>
    <div>
      2.<img :src="img" alt="">
      4. <div class="box" :style="{background: 'url(' + img + ')' }"></div>
    </div>
  </template>
  
  <script>
  import imgurl from '../../../assets/logo.png'
  export default {
    data(){
      return {
        img:imgurl
      }
    }
  }
  </script>
  

  或者

  data(){
      return {
        img:require('../../../assets/logo.png')
      }
    }
  

---

2. 相對路徑 @/assets/logo.png 或者~@/assets/logo.png

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config.resolve.alias.set("@", resolve("src"));
    },
};

• 1、3 只能使用~@/assets/logo.png
• 2、4 只能使用@/assets/logo.png

<template>
  <div>
    1.<img src="~@/assets/logo.png" alt="">
    2.<img :src="img" alt="">
    3. <div class="box imgurl"></div>
    4. <div class="box" :style="{background: 'url(' + img + ')' }"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      img:require('@/assets/logo.png')
    }
  }
}
</script>

<style scoped>
.box{
  height: 200px;
  width: 200px;
  display: inline-block;
}
.imgurl{
 background: url('~@/assets/logo.png');
}
</style>

vue推薦使用功能assets