I want to display an image from a URL in React. For example, I want this image in tsx file
http://d1cs08zudd3ykv.cloudfront.net/dev/img/arrow-up.svg
to be displayed in reactJS. When I am trying to use requires not working but require is working with the local path. Is it possible to do or Is there any other way to do it? And how to do it?
Just set image src to URL of the image
const Component = (props) => {
return (
<div>
<img src="http://d1cs08zudd3ykv.cloudfront.net/dev/img/arrow-up.svg" alt="" />
</div>
);
};
Related
I am trying to dynamically load images in a map function but it won't return anything.
I can get it to load a single image if I import it at the top of the page and hardcode the src but I have tried every solution I can find to do it dynamically and none of them work.
Here is what the code looks like. I am passing props with the title of the PNGs but nothing will load.
const Project = (props) => {
const proj = props.proj
return (
<div >
{proj.map(({title, id}) =>{
return(
<div>
<div className="..." key={id}>
<img
src={require(`../Assets/${title}.png`).default}
alt={`Image of ${title} hompage`}
className='object-cover'
/>
</div>
</div>
)
})}
</div>
)
}
export default Project;
The app was set up with create react app. I tried setting up a library but it didn't load the images either.
I have placed downloaded images in an images folder inside my public folder. The images are numbered from 1 to 10.
In my App.js file I am passing the id of each image to Component.js.
return(
<div>
{info.map((users, i) => {
return(
<Component key={i} id={info[i].id} />
)
})}
</div>
)
And in the Component.js file, I am rendering an image like this:
<img alt='image' src='/images/{this.props.id}.jpg'/>
My vision is that I will send an id through props from App.js and in Component.js I will use that id for {this.props.id}.jpg to display the id's respective image. The page is loading and there are no errors showing up but I am not able to see the images. I then changed the images folder's location and tried doing this:
<img alt='image' src={require(`D:/project-name/src/images/${this.props.id}.jpg`)}/>
But still facing the same issue. Please help me solve this issue.
The issue is in your image tag. Try making the string a template string and don't forget to add the missing dollar sign before {this.props.id}.
<img alt='image' src={`/images/${this.props.id}.jpg`} />
I want to import image from other component but Why it's not show. in
Data.js I'm showing the image path. but when I want it . it's not show
in HOME. but Without Image Everything is work properly
Data.js
export const HomeObject = {
id: 'about',
img: require('../../Images/sv-1.svg'),
alt:'CAR',
}
Home.jsx
const Info = ({img, alt}) => {
return (
<Img src={img} alt={alt} />
)
React img works similar to html img tag. pass file path as src value to show the image.
when passing image src as prop to the component, keep in mind that it needs to be a string value. not require('...') value.
const Parent = () => {
return (<Info img={'../../Images/sv-1.svg'} alt={'info image'}>
};
const Info = ({img, alt}) => {
return (
<Img src={img} alt={alt} />
);
}
this works fine in local setup. but, when you deploy the application, serve the image as static resource and use it.
What I am trying to achieve is that a particular image should be loaded for a div, when present. A default image should be loaded for all other divs for whom specific (depending on the name) image is not present.
const defaultImg = require('../images/default.jpg');
But this is the value that console returns for defaultImg - "image /static/media/default.47ce6e77.jpg"
<img src={require(`../images/${imageUrl}.jpg`)} //if I remove ther require form here then the default image is loaded for eveerything, even when the particular image is present.
onError={(event) => event.target.setAttribute("src", {defaultImg})} alt="" />
Instead of the defulat image getting loaded, it throws
Error: Cannot find module './<image-name>.jpg'
I also tried using React Image Fallback
{/* <ReactImageFallback
src={require(`../images/${imageUrl}.jpg`)}
fallbackImage={defaultImg}
initialImage="loader.gif"
alt="A cool image should be here"
className="project-pic"
/> */}
Doesn't work any different.
If const defaultImg = require('../images/default.jpg');
Why does it become /static/media/default.47ce6e77.jpg ?
Check your source in devtool. Your img might be showing as <img src="[object Object]" alt="">.
Replace your onError with onError={(event) => event.target.setAttribute("src", defaultImg)}. You are passing defaultImg as object.
Considerusing the fallback image:
<img src={imagesrc}
onError={(e) => {
e.target.onerror = null
e.target.src = fallbackImg}
} />
I'm not certain if this is specific to React or the build chain inside SPFx, but I'm having issues setting a background image on a div dynamically. I receive the URL from an API call to SharePoint and use the below code to generate a simple site card with the site logo and title.
const Site = (props: SpSite) => {
const {Title, Url, BannerImageUrl, Acronym, BannerColor} = props;
const hasLogo = BannerImageUrl && BannerImageUrl.length > 0;
const logoUrl = hasLogo ? encodeURI(BannerImageUrl) : null;
const logoStyle: React.CSSProperties = hasLogo ? {backgroundImage: `url('${logoUrl}')`} : {backgroundColor: BannerColor};
const siteLogo = <div className="site-logo" style={logoStyle}>{!hasLogo && Acronym}</div>;
return (
<div className="site-card">
<a href={Url}>
<div>{siteLogo}</div>
<div className="site-text">
<div>{Title}</div>
</div>
</a>
</div>
);
};
When the URL is in the format https://tenant.sharepoint.com/image.jpg everything works as expected and the background image is set properly on the generated HTML. When the URL has the format of https://sitename.com/GetLogo?id='RandomGUID' the attribute
style="background-image: url('https://SomeImageUrl')" doesn't get created on the resulting div. I can't figure out if this is being stripped out somewhere in the build chain or if React isn't handling it properly. I can browse directly to the GUID based image URL and it renders just fine.
Turns out that this was a simple single vs double quote issue. Switched url('${logoUrl}') to url("${logoUrl}")and all works as expected.