如何在Vue中使用变量设置图片的src属性？

本文共计347个文字，预计阅读时间需要2分钟。

在开发中，经常遇到需要使用变量来引导图片路径的情况。例如，设置背景图片、动态展示头像等。正确使用变量可以避免错误。

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

# 错误描述

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

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

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

<template> <img :src="imgSrc" /> </template> <script> export default { data() { return { imgSrc: '../../images/web_bg.png' } } } </script>

结果运行图片加载失败。