Vue中图片Src如何使用变量的方法

现实情况远非想的那么单纯容易清晰:当优越感逐渐转为失落感甚至挫败感时,当由坚信自己是一块金子到怀疑自己是一粒沙子时,愤怒,迷茫,自卑,焦急,躁动就开始与日俱增。

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

# 错误描述

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

<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如何使用变量的方法到此结束。要想赢,就必须不能怕输。不怕输,结果未必能赢。可是怕输,结果则必须是输。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明