React.js: Wie wird der richtige Link ermittelt?

Question

Ich muss eine Liste ausgeben, in der eines der Elemente ein Bild ist. Der Link zum Bild ist anders.

In diesem Fall funktioniert das nicht. Nur das require (wenn der statische Pfad) oder der Import funktioniert.

Der Import kann nicht in einer Schleife verwendet werden, der statische Pfad passt nicht zu mir.

Wie kann ich mein Problem richtig lösen?

Answer 1

würde ich so etwas tun:

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; 

Sie ein Array der contentKeys erstellen, indem Object.keys für den Inhalt Objekt.

Als nächstes durchlaufen Sie jedes Element des Arrays mit map und geben ein li-Element für jedes Element zurück, das die relevanten Informationen enthält.

Answer 2

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