在Vue中,加入图片有以下几种方式:
1. 在页面中写img标签:可以直接使用html的标签,将图片路径和需要展示的图片放在src属性中,如下所示:
```
```
其中,./assets/image.png为图片路径,alt用于设置图片的描述文本。
2. 使用Vue的v-bind指令:v-bind指令可将元素属性与Vue实例中的数据对象进行绑定,使两者保持同步。我们可以将需要展示的图片路径作为绑定的值来渲染图片。
在Vue模板中,使用src属性和v-bind指令绑定图片路径,如下所示:
```
export default {
data() {
return {
imageSrc: './assets/image.png'
}
}
}
```
在上述代码中,使用了一个data数据对象来设置图片路径,并在模板中通过v-bind指令将其和img的src属性绑定起来。
3. 展示Base64编码的图片:在某些场景下,需要将一张图片转换成Base64编码的形式,然后再将其渲染到页面中,Vue提供了一种简便的方式来实现这个功能。
```
import MyImage from './assets/image.png'
export default {
data() {
return {
imageSrc: MyImage
}
}
}
```
在上述代码中,使用了javascript的import语句将图片引入,并将MyImage作为data中的数据来设置img的src属性。
总之,在Vue中加入图片有多种方式,开发者可以根据自身的需要选择最适合的方式。