如何在vue项目中使用图片路径
问题描述在img标签中如何引入图片路径如何动态修改图片地址在background属性中如何引入图片地址问题解决图片目录- src-- assets--- images在img标签中直接使用图片<img src="@/assets/image/banner.png">动态改变img标签的地址,比如轮播图:<img :src="imgList[activeIndex]">get
·
问题描述
- 在img标签中如何引入图片路径
- 如何动态修改图片地址
- 在background属性中如何引入图片地址
问题解决
- 图片目录
- src
-- assets
--- images
- 在img标签中直接使用图片
<img src="@/assets/image/banner.png">
- 动态改变img标签的地址,比如轮播图:
<img :src="imgList[activeIndex]">
getImgList() {
let arr = []
for(let i = 0; i < 4; i++) {
let url = require(`@/assets/image/carousel${i}.png`)
arr.push(url)
}
return arr
}
- 在背景图中引入图片地址
<div :style="style1"></div>
<script>
data() {
return {
style1: {
backgroundImage : 'url(' + require('../assets/image/banner1.jpg') + ')',
// 不能完全使用变量,前置地址必须是静态地址,否则会报错
backgroundRepeat : 'no-repeat',
backgroundSize : '100% 100%',
}
}
}
</script>
备注
require里最多进行一次计算,如果require
里有两个变量,那么资源找不到了。
// 错误示例
const src = require(`${publicPath }${imgName}.png`)
更多推荐
已为社区贡献9条内容
所有评论(0)