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

【问题标题】：Setting dynamic background image in React with create react-app使用 create react-app 在 React 中设置动态背景图像
【发布时间】：2021-08-03 19:12:17
【问题描述】：

在下面的 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>
 ))}

【问题讨论】：

编译时url不会改变，运行时动态设置
谢谢。这实际上很有意义，我不知道我是怎么错过的。有没有明显的方法来访问进程环境？我试过了，我得到的 URL 是一个空字符串。
不客气 - 我不确定我理解你所说的进程环境是什么意思，但是我可以向你展示如何实现一个组件来根据需要呈现背景图像（前提是你有这些图像 url已经）
如果你不介意并且有时间的话，那就太好了。
@erfing - 刚刚发布了一个答案。这有帮助吗？

标签： reactjs create-react-app

【解决方案1】：

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

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

<div id="module"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script type="text/babel">

class DemoComponent extends React.Component { 
   
  constructor(props) {
    super(props);
    
    /* Prepopulate the state of the component with image data for subsequnet the render */
    this.state = {

        section : {
            stops : [
                { imagePath : 'https://wallpaperbrowse.com/media/images/background-wallpapers-26.jpg' },
                { imagePath : 'https://wallpaperbrowse.com/media/images/704532.jpg' },
                { imagePath : 'https://wallpaperbrowse.com/media/images/abstract-background-design_1297-88.jpg' }
            ]
        }
    }
  }
    
  render() {
  
      /* Access the section object from state, by which the stops will be rendered */
      const { section } = this.state;

      /* Ensure that the list result returned is wrapped with an element. Usually 
         <div> is used to wrap results however <React.Fragment> can also be useful */
      return <div>{ 
        section.stops.map(s => (<div 
          className="tour-stop" style={{ backgroundImage: `url(${s.imagePath})` }}>
            blah blah blah
          </div>))
      }</div>
  }
}

  ReactDOM.render(
    <div>
      <DemoComponent />
    </div>, 
  document.getElementById("module"));
</script>

希望这会有所帮助！

【讨论】：

哦，我明白你的意思了。将图像放在可以通过完整路径访问的地方绝对是正确的。不是我所希望的，但这是我现在可以使用的解决方法。感谢您的建议
@erfling 不客气 - 如果还有什么我可以帮忙的，请告诉我 :-)

【解决方案2】：

不幸的是，您必须对目录中的任何 URL 进行硬编码。您必须编写一个选择确切图像的条件。如果它的 URL 来自 DB/其他任何地方，则情况并非如此。

你的代码中的一个例子是（没有任何编码）是，

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

这只发生在您在自己的目录中获取资产时。

【讨论】：

是否有一种明显的方法可以在开发和部署中都有效？
@erfling 通过绝对路径，我的意思是硬编码路径。目前您的路径是动态路径。如果资产来自目录，则动态路径不起作用。将编辑我的答案
@erfling 这与 prod 或 dev 环境无关

【解决方案3】：

这是我的解决方案：

 &lt;div className="drag-dashboard" style={{ backgroundImage: `url(${config.DESTINATION_MEDIA_CDN+ "assets/icons_skining/upload_placeholder_skining.png"})`}}&gt; &lt;/div&gt;

【讨论】：