ce dont j'ai besoin: j'essaie d'afficher des fichiers svg à partir d'un dossier externe et ce dossier contient environ 50 fichiers et
import React from 'react';
import './App.css';
import svgs from "../public/svgfolder/0.svg"
class App extends React.Component{
render(){
return(
<div>
<img src={svgs} alt="test"></img>
</div>
)
}
}
export default App;
dans app.js
j'essaye de afficher l'image
public folder
|-images
-| 50 svgs
je reçois une erreur ci-dessous
Module introuvable: vous avez tenté d'importer ../public/svgfolder/0.svg qui ne fait pas partie du répertoire src / du projet. Importations relatives en dehors de src / ne sont pas pris en charge.
ici, j'ai besoin de 3 choses
Remarque: si j'appelle svg via l'url , p> 
cela fonctionne et si la même chose en utilisant un fichier local, ce n'est pas le cas
et si vous mettez le dossier src du fichier unique svg, un seul fichier peut être en mesure de afficher
4 Réponses :
Au lieu de charger les SVG comme vous le faites actuellement, je recommanderais SVG en ligne en tant que composants React. De cette façon, vous pouvez contrôler le style avec des accessoires et un état ainsi que de nombreuses autres fonctionnalités utiles.
Exemple :
import React from 'react';
import ReactDOM from 'react-dom'
const GithubSVG = (props) => {
const { backFill, className, mainFill } = props.props;
return(
<svg
className={className}
height='512'
id='Layer_1'
version='1.1'
viewBox='0 0 512 512'
width='512'
>
<defs id='defs'/>
<g id='g'>
<rect
height='512'
id='rect'
style={{
fill: backFill,
fillOpacity: 1,
fillRule: 'nonzero',
stroke: 'none'
}}
width='512'
x='0'
y='0'
/>
<path
d='a bunch of random numbers'
id='svg'
style={{fill: mainFill}}
/>
</g>
</svg>
)
}
export default GithubSVG;
Vous pouvez maintenant importer ce composant n'importe où.
ok comment puis-je importer un certain nombre n de svg à partir d'un dossier public et le consommer?
Si vous utilisez Webpack, il est préférable d'utiliser svg-url-loader pour le webpack et de les emballer avec vos déploiements.
Ajoutez ci-dessous dans votre webpack.config
XXX
app.css
<i className="zero" />
app.js
.zero {
background: url('../public/svgfolder/0.svg') no-repeat;
}
ce n'est pas sur un seul svg. ici j'ai un certain nombre de svgs que je dois mapper et afficher?
Avez-vous déjà essayé? C'est littéralement appelé chargeur SVG. Que pensez-vous qu'il fait.
@cullanrocks pour un seul fichier, c'est ok mais comment accéder à un nombre n de fichiers
React ne donne pas accès au contenu en dehors du répertoire src à utiliser dans le code React.
Les solutions possibles peuvent être:
Déplacez votre svg dans le répertoire src (recommandé).
Utilisez le dossier public et accédez-y comme ceci. ( Utilisation du dossier public )
.
// Using Public Folder
import React from 'react';
import './App.css';
class App extends React.Component{
render(){
const svgs = ["0.svg", "23.svg",...];
return(
<div>
{svgs.map(svg =>
<img src={`${process.env.PUBLIC_URL}/svgfolder/${svg}`} alt="test"></img>
}
</div>
)
}
}
export default App;
mais comment pouvons-nous le boucler car j'ai un certain nombre x de fichiers svg?
Où devez-vous afficher plusieurs images?
dire dans la table genre de chose que j'ai 50 svg
Avez-vous besoin d'afficher toutes ces 50 images sur un seul écran?
Si vous avez un tableau de noms svg qui sont présents dans le dossier svg, vous utilisez des méthodes de tableau comme .map ici. Pour afficher toutes ces images.
mais comment allez-vous rendre ce nom de fichier à partir du dossier src ou du dossier public? J'ai essayé de récupérer des svgs d'importation de "../public/svgfolder/ ou d'importer des svgs de" ../src/svgfolder/ mais impossible de récupérer
nous devons mentionner les noms de fichiers dans con mais pourquoi que faire si nous avons 100 fichiers alors nous devons donner 100 noms dans const?
Vous souhaitez importer tous les fichiers du répertoire. Cela ne peut être implémenté qu'en utilisant un plugin npm tiers tel que github.com/diegohaz/list- react-files .
comme un tableau ne pouvons-nous pas lire? Supposons que si vous avez quelque 150 fichiers dans un dossier public, vous devez donner 150 nom de fichier dans la droite de const
Utilisez le plugin npm pour obtenir les noms de fichiers disponibles dans le dossier svg. Utilisez ensuite ce tableau pour afficher des images.
quel abt mettre en place un fichier json et lui donner des noms, puis consommer ce fichier en utilisant la carte, nous pouvons afficher à droite
Oui, cela peut être fait. Mais toujours la même chose, vous devez gérer le fichier JSON
J'ai moi aussi le même scénario où j'ai essayé cette approche et cela a fonctionné vous pouvez essayer
import React from 'react';
import './App.css';
var images = [];
class App extends React.Component {
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('../public/public/svgfolder/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div>
<div>
{images.map((image, index) => <div> <p>{index + 1}</p> <img key={index} src={image} alt="info"></img> </div> )}
</div>
</div>
)
}
}
export default App;
Avez-vous examiné le middleware SVG? Avez-vous vérifié si Webpack peut ou non compiler des SVG sans chargeur? Avez-vous examiné SVG en ligne en tant que composants React?
Juste pour que vous le sachiez, si vous mettez un SVG dans une balise IMG, il ne se comportera pas comme un SVG. Il se comportera comme dans l'image. Voir ma réponse ci-dessous pour une meilleure solution.