Hoe kan ik een afbeelding laden uit de lokale map en deze opnemen in de tag reactjs img src
?
Ik heb een afbeelding met de naam one.jpeg
in dezelfde map als mijn component en ik heb zowel <img src="one.jpeg" />
als <img src={"one.jpeg"} />
in mijn render
functie, maar de afbeelding verschijnt niet. Ik heb ook geen toegang tot het bestand webpack config
omdat het project is gemaakt met het officiële create-react-app
-opdrachtregelprogramma.
Update: dit werkt als ik eerst de afbeelding importeer met import img from './one.jpeg'
en deze gebruik in img src={img}
, maar Ik moet zoveel afbeeldingsbestanden importeren en daarom wil ik ze gebruiken in de vorm img src={'image_name.jpeg'}
.
Antwoord 1, autoriteit 100%
Verpak eerst de src in {}
Als u Webpack gebruikt;
In plaats van:
<img src={"./logo.jpeg"} />
Mogelijk moet u het volgende gebruiken:
<img src={require('./logo.jpeg')} />
Een andere optie is om eerst de afbeelding als zodanig te importeren:
import logo from './logo.jpeg'; // with import
of …
const logo = require('./logo.jpeg); // with require
plug hem dan in…
<img src={logo} />
Ik raad deze optie aan, vooral als je de afbeeldingsbron hergebruikt.
Antwoord 2, autoriteit 21%
De beste manier is om eerst de afbeelding te importeren en daarna te gebruiken.
import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
render() {
return (
<div className="row">
<div className="logo">
<img src={logo} width="100" height="50" />
</div>
</div>
);
}
}
Antwoord 3, autoriteit 6%
Maak in de map publiceen map assetsen plaats het afbeeldingspad dienovereenkomstig.
<img className="img-fluid"
src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`}
alt="logo"/>
Antwoord 4, autoriteit 3%
U moet uw afbeeldingsbronpad in {}
plaatsen
<img src={'path/to/one.jpeg'} />
U moet require
gebruiken als u webpack
gebruikt
<img src={require('path/to/one.jpeg')} />
Antwoord 5
de beste manier om een afbeelding te importeren is…
import React, { Component } from 'react';
// image import
import CartIcon from '../images/CartIcon.png';
class App extends Component {
render() {
return (
<div>
//Call image in source like this
<img src={CartIcon}/>
</div>
);
}
}
Antwoord 6
const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />
Antwoord 7
zet je afbeeldingen in de openbare map of maak een submap in je openbare map en plaats je afbeeldingen daar.
bijvoorbeeld:
- je plaatst “completative-reptile.jpg” in de openbare map, dan heb je er toegang toe als
src={'/completative-reptile.jpg'}
- je plaatst
completative-reptile.jpg
oppublic/static/images
, dan heb je er toegang toe als
src={'/static/images/completative-reptile.jpg'}
Antwoord 8
Ik heb een andere manier gevonden om dit te implementeren (dit is een functionele component):
const Image = ({icon}) => {
const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
return <Img />
}
Hopelijk helpt het!
Antwoord 9
Je kunt dit op twee manieren doen.
Eerste
Importeer de afbeelding bovenaan de klas en verwijs ernaar in je <img/>
-element op deze manier
import React, { Component } from 'react';
import myImg from '../path/myImg.svg';
export default class HelloImage extends Component {
render() {
return <img src={myImg} width="100" height="50" />
}
}
Antwoord 10
Stap 1: import MyIcon from './img/icon.png'
stap 2:
<img
src={MyIcon}
style={{width:'100%', height:'100%'}}
/>
Antwoord 11
u moet vereisen en . standaard
<img src={require('./logo.jpeg').default} />
Antwoord 12
Mijn antwoord lijkt in principe erg op dat van Rubzen. Ik gebruik de afbeelding als de objectwaarde, btw.
Twee versies werken voor mij:
{
"name": "Silver Card",
"logo": require('./golden-card.png'),
of
const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,
Zonder wrappers – maar dat is ook een andere toepassing.
Ik heb ook de “import”-oplossing aangevinkt en in enkele gevallen werkt het (wat niet verwonderlijk is, dat wordt toegepast in patroon App.js in React), maar niet in het geval zoals de mijne hierboven.
Antwoord 13
Voor mensen die meerdere afbeeldingen willen gebruiken, is het natuurlijk een probleem om ze één voor één te importeren. De oplossing is om de map afbeeldingen naar de openbare map te verplaatsen. Dus als je een afbeelding had op public/images/logo.jpg, zou je die afbeelding op deze manier kunnen weergeven:
function Header() {
return (
<div>
<img src="images/logo.jpg" alt="logo"/>
</div>
);
}
Ja, het is niet nodig om /public/ in de bron te gebruiken.
Lees verder: https://daveceddia.com/react-image-tag/.
Antwoord 14
Ik heb deze manier gebruikt en het werkt… Ik hoop dat je er iets aan hebt.
const logofooter = require('../../project-files/images/logo.png');
return(
<div className="blockquote text-center">
<img src={logofooter} width="100" height="80" />
<div/>
);
Antwoord 15
import React from "react";
import image from './img/one.jpg';
class Image extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
standaardafbeelding exporteren
Antwoord 16
Zoals sommigen in de opmerkingen vermeldden, kunt u de afbeeldingen in de openbare map plaatsen. Dit wordt ook uitgelegd in de documenten van Create-React-App: https ://create-react-app.dev/docs/using-the-public-folder/
Antwoord 17
logo importeren uit ‘./logo.jpeg’; // met import
plug hem dan in…
Dat is het.
Antwoord 18
Je zou een bestand kunnen maken met de naam bijvoorbeeld images.js en daar naar al je app-bronnen verwijzen, en later die component importeren in al je andere componenten waar je afbeeldingen zou moeten weergeven
Antwoord 19
import image from './img/one.jpg';
class Icons extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
export default Icons;