vue用assets图片

在Vue项目中，`assets`目录通常用于存放静态资源，包括图片、字体文件、CSS样式表、JavaScript文件等非Vue本身处理的数据。当你需要在Vue组件中使用这些图片，可以按照以下步骤操作：

1. **添加图片到assets**:
将图片文件复制到`src/assets/images`或者其他自定义的images子目录下。为了管理文件结构，可以考虑按照功能或类别组织。

2. **引用图片**:
使用`require`函数在Vue组件的模板或逻辑层（如JavaScript文件）中加载图片。例如，在HTML里：

   <img :src="require('@/assets/images/your-image.jpg')" alt="Your Image">

或者在JS里：

   export default {
     computed: {
       imageUrl () {
         return require('@/assets/images/your-image.jpg')
       }
     },
     template: `
       <img :src="imageUrl" alt="Your Image">
     `
   }

3. **路径别名（optional）**:
如果项目采用了路径别名（如`alias`配置），可以使用`@`前缀简化图片路径。例如，在Webpack配置中设置`resolve.alias`:

   resolve: {
     alias: {
       '@': path.resolve(__dirname, '../src'),
       'images': path.resolve(__dirname, '../src/assets/images')
     }
   }