Question

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

<activity
    android:name=".PointsScreen"
    android:theme="@style/AppTheme.NoActionBar">
</activity>

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

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

如何正确解决我的问题？

Answer 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元素，其中包含相关信息。

Answer 2

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

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

2 个答案: