Vue中图片Src使用变量

作者: 果汁凉茶丶 | 来源:发表于2019-10-28 10:49 被阅读0次

  相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况,如定制化背景,动态展示头像等。可能也犯过如下错误

# 错误描述

  页面直接调用图片资源的方案

<img src="../../static/images/web_bg.png" />

  改写成变量形式,于是如下编写

<template>
  <img :src="imgSrc" />
</template>

<script>
export default {
  data() {
    return {
      imgSrc: '../../images/web_bg.png'
    }
  }
}
</script>

  结果运行图片加载失败。什么原因?原来是因为在打包时会被自动加上hash值从而引用失败,产生差异

# 解决办法

1. 使用 网络上的图片资源
data() {
  return {
    imgSrc: 'http://easy-stage.longhu.net/files/images/7f458e55f6954078aa8e8efb2c45cc40.jpg'
  }
}
2. 使用import导入本地资源
import imgSrc from '../../images/web_bg.png'
export default {
  data() {
    return {
      imgSrc: imgSrc
    }
  }
}
3. 使用 require 导入
data() {
  return {
    imgSrc: require('../../images/web_bg.png')
  }
}

相关文章

网友评论

    本文标题:Vue中图片Src使用变量

    本文链接:https://www.haomeiwen.com/subject/cpduvctx.html