欢迎光临
技术人生-雨巷前端

vue 中图片添加url 的注意事项

vue 中图片添加url 的注意事项

第一种:

<img v-for='url in imgurl' :src='url' />
export default {
  data() {
    return {
      imgurl: [
        '../assets/img/icon1.png',
        '../assets/img/icon2.png'
      ]
    }
  }
}

 

报错如下:

861122-20171019113308365-212578501

修改之后的代码:

imgurl:['../assets/img/icon1.png' , '../assets/img/icon2.png']

修改为:
imgurl:[require('../assets/img/icon1.png') ,require('../assets/img/icon2.png')]
<img v-for='url in imgurl' :src='url' />

 

export default {
  data() {
    return {
      imgurl: [
        require('../assets/img/icon1.png'),
        require('../assets/img/icon2.png')
      ]
    }
  }
}

结果为:

vue2

第二种:

当我们需要在js代码里面写图片路径的时候,如果我们在data里面写

/*错误写法*/
imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:

<img :src="avatar" />
import avatar from '@/assets/logo.png'
在data里面定义
avatar: avatar

第三种:

我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:

imgUrl : '../../static/logo.png'

<img :src="imgUrl" />

 

未经允许不得转载:技术人生 » vue 中图片添加url 的注意事项

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我是前端,我不迷茫