需求描述
在vue中引入图片。
解决方法
在vue中引入图片有两种方式,使用require或者import。
若是需要动态切换则推荐使用require,若只是引入图片必入作为背景不再改变,则推荐使用import。
require
<template>
<div style="margin:100px">
<div>
<img :src="cat" alt="猫咪">
</div>
</div>
</template>
<script>
export default {
data () {
return {
cat: require('@/assets/images/cat.jpg'),
}
}
}
</script>
import
- import引入图片
- data中注册一下引入的图片名称
- 模板中直接引用名称
<template>
<div style="margin:100px">
<div>
<img :src="cute" alt="小可爱">
</div>
</div>
</template>
<script>
import cute from '../assets/images/cute.jpg'
export default {
data () {
return {
cute
}
}
}
</script>