https://github.com/zyyv/unplugin-vue-image

自动引入图片。Auto import images.
https://github.com/zyyv/unplugin-vue-image

plugin unplugin vite

Last synced: 2 months ago
JSON representation

自动引入图片。Auto import images.

• Host: GitHub
• URL: https://github.com/zyyv/unplugin-vue-image
• Owner: zyyv
• License: mit
• Created: 2022-02-11T13:34:23.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-07T16:54:27.000Z (about 1 year ago)
• Last Synced: 2024-10-14T10:02:10.689Z (2 months ago)
• Topics: plugin, unplugin, vite
• Language: TypeScript
• Homepage:
• Size: 624 KB
• Stars: 37
• Watchers: 1
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# unplugin-vue-image

[![NPM version](https://img.shields.io/npm/v/unplugin-vue-image?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-image)

## Install

```bash

npm i unplugin-vue-image -D

```

Vite


```ts

// vite.config.ts

import Image from 'unplugin-vue-image/vite'

export default defineConfig({

  plugins: [

    Image({ /* options */ }),

  ],

})

```

Example: [`playground/`](./playground/)




Rollup


```ts

// rollup.config.js

import Image from 'unplugin-vue-image/rollup'

export default {

  plugins: [

    Image({ /* options */ }),

  ],

}

```




Webpack


```ts

// webpack.config.js

module.exports = {

  /* ... */

  plugins: [

    require('unplugin-vue-image/webpack')({ /* options */ }),

  ],

}

```




Nuxt


```ts

// nuxt.config.js

export default {

  buildModules: [

    ['unplugin-vue-image/nuxt', { /* options */ }],

  ],

}

```

> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)




Vue CLI


```ts

// vue.config.js

module.exports = {

  configureWebpack: {

    plugins: [

      require('unplugin-vue-image/webpack')({ /* options */ }),

    ],

  },

}

```




## Usage

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

You can only use image variables using camelCase.

```

--- aseets

  --- images

    --- logo.png

--- App.vue

```

```vue

--- src/App.vue ---

  


    

  


```

## Credits

This plugin was inspired by [vite-plugin-vue-images](https://github.com/sampullman/vite-plugin-vue-images), it's an enhanced version of it.

## License

[MIT](./LICENSE)