J'ai eu des problèmes nécessitant des images dans mon applicaiton angulaire 2 Webpack.
J'ai essayé trois ou quatre chargeurs d'images, mais je ne semble pas pouvoir les configurer correctement et que le résultat du HTML est incorrect.
Par exemple, au moment où j'ai: p> Le fichier contenant cette image fait partie d'un modèle requis comme celui-ci: p> Il en résulte une erreur dans le navigateur: p> mon chargeur pour images image mon webpack.config.js ressemble à ceci: P> { test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=50000&name=[path][name].[ext]" }
4 Réponses :
a trouvé la réponse.
Il n'y a pas besoin de $ requiert le SRC dans l'image; WebPack traitera cela avec le bon chargeur.
J'ai créé un extra-webpack.config.js et j'ai tenté de référencer une URL-loader pour JPE? G | png \ gif et son base de base64 "code> . J'ai passé plusieurs heures à dorking avec elle. Si quelqu'un a une idée, il serait apprécié.
Je n'ai pas fait vérifier cela, mais c'est l'idée générale:
nécessite une variable dans le contrôleur respectif de la manière suivante p> puis Dans votre modèle, les imagesRC seraient soit codées Base64, soit l'URL de données selon votre configuration de chargeur. P> <img src='{{imageSrc}}'>
Il n'y a pas de $ de portée en angulaire 2.
Vous devriez le faire comme si. Je sais que vous l'avez compris mais pour une référence future, vous n'avez pas besoin d'utiliser. Utilisez ____URL à la place. Exiger de me faire des problèmes avec d'autres bibliothèques à l'aide de WebPack pour le chargement des actifs ... ce n'est pas nécessaire.
<img src="../images/logo.png">
//note styleUrl and templateUrl since you have a path not inline with component
@Component({
selector: 'appstore-app',
directives: [ ...ROUTER_DIRECTIVES ],
styleUrl: ['../sass/appstore.scss'],
templateUrl: './app.component.html'
})
Par exemple et votre code de composant est p> Vous devez insérer ce code avant d'appliquer ce composant. P> declare function require(name: string): string;
Avez-vous résolu ceci? Comment?