Skip to content

🤖 在vue项目中自动导入图片路径

License

Notifications You must be signed in to change notification settings

lyric-zemin/unplugin-vue-auto-img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0580eaf · Nov 4, 2024

History

21 Commits
Oct 31, 2024
Oct 31, 2024
Nov 4, 2024
Oct 31, 2024
Nov 4, 2024
Nov 4, 2024
Oct 31, 2024
Nov 4, 2024
Nov 1, 2024
Nov 1, 2024
Nov 1, 2024
Oct 31, 2024
Nov 4, 2024
Nov 1, 2024
Oct 31, 2024
Oct 31, 2024
Oct 31, 2024
Oct 31, 2024

Repository files navigation

unplugin-vue-auto-img

Automatically import images into the vue project

NPM version

.d.ts

add them to the types property in your tsconfig.json:

{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-auto-img/client"]
  }
}

Install

npm i unplugin-vue-auto-img
Vite
// vite.config.ts
import Images from 'unplugin-vue-auto-img/vite'

export default defineConfig({
  plugins: [
    Images({ /* options */ }),
  ],
})

Example: playground/


Rollup
// rollup.config.js
import Images from 'unplugin-vue-auto-img/rollup'

export default {
  plugins: [
    Images({ /* options */ }),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-auto-img/webpack')({ /* options */ })
  ]
}


Nuxt
// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['unplugin-vue-auto-img/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-auto-img/webpack')({ /* options */ }),
    ],
  },
}


esbuild
// esbuild.config.js
import { build } from 'esbuild'
import Images from 'unplugin-vue-auto-img/esbuild'

build({
  plugins: [Images()],
})


Usage

unplugin-vue-auto-img auto import your image from assets/images by default to your Vue component.

You can only use image variables using camelCase.

--- assets
  --- images
    --- logo.png
--- App.vue
--- src/App.vue ---
<template>
  <div>
    <img :src="ILogo">
  </div>
</template>

License

MIT