我的 React 应用程序将我的图像的 URL 呈现为 url("未定义");

Question

这是我的JSX代码。

<div class="propertie-item set-bg" style="background-image: url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg');"><div class="sale-notic">FOR SALE</div><div class="propertie-info text-white"><div class="info-warp"><h5>176 Kingsberry, Dr Anderson</h5><p><i class="fa fa-map-marker"></i> Rochester, NY 14626</p></div><div class="price">$1,777,000</div></div></div>

但是，当我运行我的应用程序时，图像未加载。当我检查元素时，元素显示：

<div class="propertie-item set-bg" style="background-image: url('undefined');"><div class="sale-notic">FOR SALE</div><div class="propertie-info text-white"><div class="info-warp"><h5>176 Kingsberry, Dr Anderson</h5><p><i class="fa fa-map-marker"></i> Rochester, NY 14626</p></div><div class="price">$1,777,000</div></div></div>

不知道为什么这样做，因为它是一条确切的路径并且它存在。

Answer 1

据我所知，在其他引号中调用引号会导致它们转义。所以我将图像链接包装在''而不是""，因此它将正确呈现字符串。

<div class="propertie-item set-bg" style="background-image: url('https://s3.us-east-2.amazonaws.com/housessoldeasily.com/img/bg.jpg');"><div class="sale-notic">FOR SALE</div><div class="propertie-info text-white"><div class="info-warp"><h5>176 Kingsberry, Dr Anderson</h5><p><i class="fa fa-map-marker"></i> Rochester, NY 14626</p></div><div class="price">$1,777,000</div></div></div>

如果你想将你现有的静态网站转换为 ReactJS 网站，那么我建议阅读这个 在 React 中思考