Vue引入静态图片的两种方式
1.require形式引入<template><div style="margin:100px"><div><img :src="cat"// 图片srcalt="猫咪"></div></div></template><script>export default {data () {return {
·
1.require形式引入
<template>
<div style="margin:100px">
<div>
<img :src="cat" // 图片src
alt="猫咪">
</div>
</div>
</template>
<script>
export default {
data () {
return {
cat: require('../assets/images/cat.jpg'), // require转换一下图片地址
}
}
}
</script>
2.import形式引入
- import引入图片
- data中注册一下引入的图片名称
- 模板中直接引用名称
<template>
<div style="margin:100px">
<div>
<img :src="cute" // img地址
alt="小可爱">
</div>
</div>
</template>
<script>
import cute from '../assets/images/cute.jpg' // import引入
export default {
data () {
return {
cute // data中注册图片
}
}
}
</script>
图片存放及组件目录
更多推荐
已为社区贡献5条内容
所有评论(0)