如何在vue项目中使用图片路径

问题描述

• 在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`)