Question

在以下TSX / JSX中，由于在转换过程中未更改URL，因此背景图像无法正确加载，因此指向错误的位置。

我认为这是一个webpack配置问题。过去，我已经手动设置了React应用程序，但是对于创建react-app来说还是相当陌生。我是否需要弹出并进行一些手动配置，还是有更好的方法来动态加载我丢失的背景图像？

{section.stops.map(s => (
  <div 
    className="tour-stop"
    style={{
        backgroundImage: `url(./img/${s.imagePath})`
    }}
  >
       blah blah blah
  </div>
 ))}

Answer 1

不幸的是，您必须对目录中的所有URL进行硬编码。您必须编写一个条件以选择确切的图像。如果其URL来自数据库/其他任何地方，则不是这种情况。

您的代码中的一个示例是（没有任何代码）

如果s.imagePath是'val1'，请使用此图片：'./img/1.jpeg'如果不是，请使用任何图片。

仅当您在自己的目录中获取资产时，这种情况才会发生。

Answer 2

要为stops动态设置为您的组件渲染的背景图像，请考虑使用诸如render()或{{1}之类的元素包装从<div>返回的项目列表}，而不是如下所示的<React.Fragment>括号：

{ .. }

.tour-stop {
  padding:5rem;
  text-align:center;
}

希望这会有所帮助！

Answer 3

这是我的解决方案：

...
password_hash= None if user.password_hash is None else ab64_decode(bytes(user.password_hash, encoding='utf-8')),
password_salt= None if user.password_salt is None else ab64_decode(bytes(user.password_salt, encoding='utf-8')),
...

在React中使用create react-app设置动态背景图片

3 个答案: