用空格绑定 Vue 背景图片答案

【问题标题】：Bind Vue Background image with spaces用空格绑定 Vue 背景图片
【发布时间】：2020-06-15 07:51:02
【问题描述】：

我正在尝试设置背景图片 css 属性，当图像没有空格时，图像被正确渲染，但是当图像名称中有空格时，它不会被渲染，因为我从数据库中带来的信息，我很难重命名所有图像。

<div :style="{'min-height':'200px', 'background-image': 'url(/18edp/Content/img/empresas/' + e.Name + '.jpg)'}"></div>

当图像的名称是 E.G. imagename.jpg 代码有效，但图片有空格 E.G. 图片名称.jpg代码无效。

你能帮帮我吗？

您好。

【问题讨论】：

【解决方案1】：

您需要用“%20”替换空格，在这种情况下使用encodeURIComponent

<div :style="{'min-height':'200px', 'background-image': 'url(/18edp/Content/img/empresas/' + encodeURIComponent(e.Name) + '.jpg)'}"></div>

【讨论】：