站长资源网络编程
Vue中图片Src使用变量的方法
简介相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，如定制化背景，动态展示头像等。可能也犯过如下错误# 错误描述页面直接调用图片资源的方案
改写成变量形式，于是如下编写![]()
改写成变量形式，于是如下编写相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况，如定制化背景，动态展示头像等。可能也犯过如下错误
# 错误描述
页面直接调用图片资源的方案
<img src="/UploadFiles/2021-04-02/web_bg.png">改写成变量形式，于是如下编写
<template> <img :src="/UploadFiles/2021-04-02/imgSrc">结果运行图片加载失败。什么原因？原来是因为在打包时会被自动加上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') } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。