vue导入及使用本地图片
MSite.vue导入本地图片图片所在位置:1.直接使用<template><img src="./image/1.jpg"/></tempalte>2.data里使用require<template><img :src="imgUrl"></template><script>ex...
·
MSite.vue导入本地图片
图片所在位置:
1.直接使用
<template>
<img src="./image/1.jpg"/>
</tempalte>
2.data里使用require
<template>
<img :src="imgUrl">
</template>
<script>
export default {
data() {
return {
imgUrl:require('./image/1.jpg')
}
}
}
</script>
3.data使用import进来
<template>
<img :src="imgUrl">
</template>
<script>
import img from './image/1.jpg'
export default {
data() {
return {
imgUrl:img
}
}
}
</script>
4.使用生命周期
<template>
<img :src="imgUrl">
</template>
<script>
export default {
data() {
return {
imgUrl:''
}
},
created() {
let urlImg = "pages/MSite/image/1.jpg"
this.imgUrl = require("@/"+urlImg)
}
}
</script>
如果图片很少,我个人推荐使用方法二,感觉比较方便吧
如果图片大量的,可以使用方法二或三,把数据提取出来放在其他js文件(详情)。
更多推荐
已为社区贡献2条内容
所有评论(0)