vue2项目中 怎么引入图片后改变图片大小
时间: 2024-01-23 15:04:26 浏览: 28
在Vue2项目中,您可以通过以下步骤引入图片并改变图片大小:
1. 将图片文件放置于项目中的某个文件夹中,例如:src/assets/images。
2. 在需要使用该图片的Vue组件中,使用以下方式引入图片:
```javascript
<template>
<div>
<img :src="require('../assets/images/company-image.png')" alt="Company Image" :style="{ width: '200px', height: 'auto' }">
</div>
</template>
```
在上述代码中,您需要根据实际情况修改图片的文件路径和名称。`:src="require(...)"` 是Vue2中引入图片的方式,其中`:src`是Vue的属性绑定语法,`require(...)`用于将图片文件打包为模块。`:style="{ width: '200px', height: 'auto' }"`用于设置图片的宽度和高度,其中宽度为200px,高度自适应。
3. 如果您需要在多个组件中使用同一个大小的图片,您可以考虑将图片大小定义为样式类,例如:
```css
/* 在 src/assets/styles 中定义图片大小样式类 */
.img-200 {
width: 200px;
height: auto;
}
```
然后,在需要使用该图片的Vue组件中,使用以下方式引入图片:
```javascript
<template>
<div>
<img :src="require('../assets/images/company-image.png')" alt="Company Image" class="img-200">
</div>
</template>
```
在上述代码中,`class="img-200"`将图片应用了定义好的样式类,使其具有了200px的宽度和自适应的高度。