[Vue-cli 3]圖片處理

 

預設寫法

這樣寫他會轉成base64

<template>
  <img :src="myImage">
</template>
<script>
import myImage from '@/assets/images/myImage.png'
export default {
  data() {
    return {
      myImage: myImage
    }
  }
}
</script>

單純引入url寫法

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

<template>
  <img src="/images/myImage.png">
</template>

圖片放到 public/images 裡面