React.js：如何确定正确的链接？答案

【问题标题】：React.js: How to determine the correct link?React.js：如何确定正确的链接？
【发布时间】：2018-04-17 06:19:31
【问题描述】：

我需要输出一个列表，其中一个元素是图片。图片的链接不同。

for (let i = 0; i < this.contentKeys.length; i++) {
    let ingUrl = `../../img/data/${this.content[this.contentKeys[i]].imgMin}`
    ContentElements.push(
        <li key={i}>
            ...
            <div style={{backgroundImage: 'url(' + require(ingUrl) + ')'}} ></div>
...

在这种情况下，这不起作用。只有 require（如果静态路径）或 import 有效。

导入不能循环使用，静态路径不适合我。

如何正确解决我的问题？

【问题讨论】：

好奇为什么不使用绝对图像路径？

标签： css reactjs url jsx

【解决方案1】：

我会这样做：

import React, {Component} from 'react';
import './style.scss';
// import logo from '../../img/data/1-1.jpg';
// import img from '../../logo.svg';
// import dir from '../img/data/';


// console.log(img)

class Content extends Component {
    constructor(props) {
        super(props)
        this.content = this.props.data
        this.contentKeys = Object.keys(this.content)
        this.renderContentElements = this.renderContentElements.bind(this)
    }

    renderContentElements(){
        this.contentKeys.map(key =>
            <li className="contentElement" key={i}>
                <div className="left">
                    <div className="realEstateType"><h2>{key.realEstateType}</h2></div>
                    <div className="floor"><h3>{key.floor} floor</h3></div>
                    <div className="bedrooms"><h3>{key.floor} bedrooms</h3></div>
                    <div className="price"><h2>${key.price}</h2></div>
                </div>
                <div className="center">
                    <div className="address"><h3>{key.address}</h3></div>
                    <div className="special"><h3>{key.special}</h3></div>
                    <div className="area"><h3>{key.area}</h3></div>
                </div>
                {/*background-image: url(http://i54.tinypic.com/4zuxif.jpg)*/}
                {/*<div className="right" style={{backgroundImage: "url(http://i54.tinypic.com/4zuxif.jpg)" }}></div>*/}
                <div className="right" style={{backgroundImage: `url(../../img/data/${key.imgMin}`}}></div>


                {/*<div className="right" style={{  backgroundImage: `url(${require('../../img/data/1-1.jpg')})` }} ></div>*/}
                {/*<div className="right" style={{  backgroundImage: 'url(' + require(String(ingUrl)) + ')' }} ></div>*/}

                {/*<img className={'test'} src={ingUrl} alt="Test" />*/}
                {/*<img className={'test'} src={require(ingUrl )}  alt="Test" />*/}

                {/*<img className={'test'} src={require(`${ingUrl}`)} />*/}


                       {/*<div className="right" style={{backgroundImage: require('../../img/data/1-1.jpg') }}></div>*/}
                {/*<img src={require('../../img/data/1-1.jpg')} alt=""/>*/}
                {/*<img className="test" src={'../../img/data/1-min.jpg'} alt=""/>*/}
                {/*<img className="test" src={logo} alt=""/>*/}
            </li>
        )
    }

    render() {
        return (
            <ul id="Content">
                {this.renderContentElements()}
            </ul>
        )
    }
}

export default Content;

您可以使用 Object.keys 为内容对象创建一个 contentKeys 数组。

接下来，您使用 map 遍历数组的每个项目，并为每个项目返回一个 li 元素，其中包含相关信息。

【讨论】：

也许我没有那样问这个问题。 @tay_thomp 图片的链接显示正确，这些路径上没有图片。相反，重点是在解释过程中变得不正确的路径。在屏幕截图中，我展示了正确的方法。 codepen.io/anon/pen/OONwYO

【解决方案2】：

<div className="right" style={{backgroundImage:  "url(" + require(`../../img/data/${this.content[i+1].imgMin}`) + ")" }}></div>

【讨论】：