Kann nicht relative img src Route in React + Webpack übergeben

Ich kann relative img src Route in React + Webpack nicht dynamisch mit this.props übergeben.Kann nicht relative img src Route in React + Webpack übergeben

Dies ist ein sehr vereinfachter Teil der übergeordneten Komponente. Es iteriert einige Datenlisten und generiert ImgComponents, die Requisiten übergeben. Hier ist nur winziger Teil davon:

return (
     <div> 
     <ImgComponent srcProp={videolist.anotherImage.src} /> 
     </div> 
    );

Die ImgComponent hat:

render() { 
    return (
     <div> 
      <img src={`${this.props.srcProp}`} /> 
     </div> 
    ); 
    }

In Konsole bekomme ich genau den gleichen Weg, wie ich mit this.props.srcProp passieren, aber es wäre das nicht gefunden Ordner und der IMG dort. Als würde Webpack den img nicht laden. Hier ist die Konsole:

<img src="framework/assets/images/cover-bigbuckbunny.png" class="_2WcF9ZmcK-9bQX6jKk18Y_" data-reactid=".0.1.1:$comedy.0.0.$0.0.0.0">

Egal welchen Weg ich zeigen, wird das img nie in den Ordner gefunden. Hier

ist die webpack Config für png:

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

BTW. Es funktioniert gut, wenn ich die Datei benötigen, wie:

<img src={require ('framework/assets/images/cover-bigbuckbunny.png')} />

oder eine Remote-Route angeben, wie http://route.to.some.img

Scheint, wie webpack es nicht geladen wird. Was muss ich tun, um lokale IMG-Dateien dynamisch zu laden, indem Sie src mit {this.props.src} dynamisch übergeben? Wie ich sehen kann, wird der Loader geladen, wenn ich die Datei mit require anzeige. Aber so kann ich es nicht dynamisch machen, da require keine Variablen benötigt.

Quelle

2016-04-07 Peter Babukh

Was ich geschaffen, ist zu require('../../assets/images/myFirst.img') in dem Objekt, um die Router zu den lokal gespeicherten Dateien enthalten:

in playlist.js

export default (
    { 
    cartoons: [{ 
     images: { 
     poster: require('../../assets/images/myFirst.png') 
     }, 
     streams: [{ 
     type: 'mp4', 
     url: 'http://media.w3.org/2010/05/bunny/movie.mp4' 
     }] 
    });

Dann habe ich mit dieser Liste arbeiten wie bei jedem Objekt:

import playlist from '../../playlist';

und iterieren dieses Objekt in einer üblichen Weise. Das Bild wird da sein.

Quelle

2016-04-11 06:44:45

Wie geht es, wenn diese URLs von db kommen? – Itzdsp

Ich habe das nicht versucht. Ich schätze, ich würde es beantworten, wenn ich es versuchen könnte, aber ich bin jetzt ziemlich weit davon entfernt. –

danke für die Antwort. Ich habe versucht, den gesamten Ordner zu importieren und es hat funktioniert :) – Itzdsp

Webpack durchläuft Ihren Code nicht, um alle möglichen Verweise auf Dateien zu finden und zu konvertieren.

Betrachten Sie folgenden Code:

<img src={'/foo/bar/baz.jpg'} />

Es ist Ihre Verantwortung (vielleicht eine Build-Target), um sicherzustellen, dass baz.jpg in das foo/bar Verzeichnis unter Web-App root kopiert wird.

Quelle

2016-04-07 17:20:57 Amey

Vielen Dank für die schnelle Antwort, Amey. Bedeutet es, dass es für mich keine Möglichkeit gibt, zu tun? –

Auch wenn ich schreibe und stellen Sie sicher, dass die Datei im Ordner ist, wird es nicht gesehen. Versuchte alle möglichen Routen. Scheint wie inlined src funktioniert nicht. Nicht wissen was zu tun. –

Ich fand es heraus und legte meine Antwort. –

Kann nicht relative img src Route in React + Webpack übergeben

Antwort

Verwandte Themen