Develop Reference

Image is not uploading in React. instead alt tag is showing

In my project i have make a main.jsx in which i provide image link and description in array of 3 item. then i take those to another component name Photo through Photowall.jsx . But image is showing of alt. not the imgaeLink
<figure className='figure'>
<img src={post.imageLink} alt={post.description}/>
</figure>
my main.jsx -
import Header from './Header'
import Photowall from './Photowall'
const posts = [
{
id:"0",
description:"Konoha green beast",
imageLink:"https://www.google.com/imgres?imgurl=http%3A%2F%2Fpm1.narvii.com%2F6439%2Fecfa73c34db4039a4dd92481ea16a180a18608ed_00.jpg&imgrefurl=https%3A%2F%2Faminoapps.com%2Fc%2Fnaruto%2Fpage%2Fitem%2Fmight-guy%2FpP62_LZupInrJwxPJ6ljo7bjQGaD4JvLQW&tbnid=yS1-MAqQpVQZ2M&vet=12ahUKEwiW95Dlj9v2AhXpNbcAHXJGBZQQMygJegUIARDpAQ..i&docid=F6A5JxmHTsx4zM&w=400&h=300&q=guy%20sensei&ved=2ahUKEwiW95Dlj9v2AhXpNbcAHXJGBZQQMygJegUIARDpAQ"
},
{
id:"1",
description:"again Uchiha",
imageLink:"tobi.png"
},
{
id:"2",
description:"rasenshuriken",
imageLink:"https://www.google.com/imgres?imgurl=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fnaruto%2Fimages%2Fd%2Fd6%2FNaruto_Part_I.png%2Frevision%2Flatest%3Fcb%3D20210223094656&imgrefurl=https%3A%2F%2Fnaruto.fandom.com%2Fwiki%2FNaruto_Uzumaki&tbnid=8EoJhgCyc-eLmM&vet=12ahUKEwiqtLyektv2AhX7yaACHVQOB34QMygBegUIARDVAQ..i&docid=WdjV5wKAFZeaKM&w=1440&h=1076&itg=1&q=naruto&hl=en&ved=2ahUKEwiqtLyektv2AhX7yaACHVQOB34QMygBegUIARDVAQ"}
]
function Main() {
return (
<>
<Header title={"Photowall"} />
<Photowall posts = {posts}/>
</>
)
}
export default Main
I have tried through url and through statis too but it doesnot work.
Photowall.jsx
import React from 'react'
import Photo from './Photo'
function Photowall(props) {
return (
<div className='photo-grid'>
{props.posts.map((post,index) => <Photo key={index} post={post}/>)}
</div>
)
}
export default Photowall
and photo.jsx -
import React from 'react'
function Photo(props) {
const post = props.post
return (
<div>
<figure className='figure'>
<img src={post.imageLink} alt={post.description}/>
</figure>
</div>
)
}
export default Photo
please checout this repo - https://github.com/mohitRana-04/Photowall

Try copy image address and then paste it in the respective place .
const posts = [
{
id:"0",
description:"Konoha green beast",
imageLink:"should be a valid image link"
},
{
id:"1",
description:"again Uchiha",
imageLink:"should be valid image link"
},
{
id:"2",
description:"rasenshuriken",
imageLink:"should be a valid image link"}
]

The link you are passing is not a link to an Image instead it is a url to a page,
to get an Image link you have to right click and select Open image in new tab
and after that you will see this url which is an actual link to image
http://pm1.narvii.com/6439/ecfa73c34db4039a4dd92481ea16a180a18608ed_00.jpg
and this is an actual image link because it will have an extension of image at the end
I hope this will solve your problem :)

How to redirect when clicked on Carousel images in React?

In a React project, I have Carousel installed from 'react-responsive-carousel' npm package. In that I want to redirect to some component on click of images sliding in it. How could be it done
const data = [
{
img:
"https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
img:
"https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
},
{
img:
"https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg"
},
{
img:
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"
}
];
<Carousel autoPlay infiniteLoop showArrows={false} showThumbs={false}>
{data.map((item) => (
<Link to="/images">
<img src={item.img} />
</Link>
))}
</Carousel>
Below is the link for CodeSandbox for better clarity
CodeSandbox Link: https://codesandbox.io/s/sad-sea-1ptl3

add your target URL to your data object, like this:
const data = [
{
img:
"https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
targetURL: "/posts/blahblah?id=10100110",
},
......]
then add onChange props to the image tag and use the useHistory to change your route, e.g:
const history = useHistory();
<img src={item.img} onChange={() => history.push(item.targetURL)}/>

Ideally wrapping of your img element with Link should have worked but on inspecting the css, I noticed that your Carousal css , specifically the .carousal img selector has the rule pointer-events:none and that's why you're not seeing that hand cursor when hovering over the img as you generally do.
So you can either add one more layer like that of div between Link and img and that will work.
Or you can override the css of the Carousal library that you're using.

Just replace Link by div and use onClick() on this tag
{data.map((item, index) => (
<div
key={index}
onClick={() => window.open("https://javascript.info/")}
>
<img src={item.img} alt="img" />
</div>
))}

{
id:1,
img:
"https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
id:2,
img:
"https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
},
{
id:3,
img:
"https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg"
},
{
id:4,
img:
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"
}
];
<Carousel autoPlay infiniteLoop showArrows={false} showThumbs={false}>
{data.map((item) => (
<Link to=`/images/${item.id}`>
//change <Route /> in App.js accordingly
<img src={item.img} />
</Link>
))}
</Carousel>```

The <a> tag generated from <Link> is there it's just that it's about 20px high.
I'm not sure what css the carousel generates but I suggest diving in and seeing if you can absolute position the <a> tag and take 100% width and height - to a parent that has position relative ofcourse.

Imported image showing image path instead of the image - React.js

I tried importing an image but instead of displaying the image, it's displaying the path to the image instead.
The Array I'm creating, and I'm still adding more data to it is:
import importedImage from './assets/path.png';
export const membersData = {
All: [
{
id: 1,
picture: importedImage,
name: 'Demo name',
location: 'Demo location',
role: 'Consultant ',
contact: 'T: number \nE: mail'
},
],
}
How I rendered it:
{posts.length === 0 ? (
<p>No posts...</p>
) : (
posts.map((post) => (
<div key={post.id}>
{post.picture}
</div>
)))}
result : /static/media/path.aba65f86.png
Note: The path isn't what I've actually used, it's just for demonstration purposes

if your bundler configured well, with import you should get a base64 image url.
So you can just pass it to the img tag:
<img src={post.picture} alt=""/>

Pass the Imported Image url to the image tag's src attribute.
<img src={post.picture} alt="Could not load image" />

Parse tags in react

I have created object like that
export const homeObjOne ={
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine:'Explore DrukBox', // - working correctly
headLine: 'Unlimited printing <br> with us',
description: 'Lets <br> begin!', // - output: Lets <br> begin!(with br)
buttonLabel: 'Get Started',
imgStart: '',
img: './assets/svg-1.svg',
alt: 'DrukBox'
}
and bringing it to component like that
function HeroSection({
lightBg,topLine,lightText,lightTextDesc,headLine,description,buttonLabel,img, alt, imgStart
}) {
return (
<div className={lightBg ? 'home__hero-section' : 'home__hero-section darkBg'}>
<div className="container">
<div className="row home__hero-row"
style={{display:'flex',flexDirection: imgStart === 'start' ? 'row-reverse' : 'row'}}
>
And so on
<div className="home__hero-img-wrapper">
<img src={img} alt={alt}/>
</div>
</div>
</div>
</div>
)
}
but in the object my html code not parses i tried all types ',",`
import {homeObjOne} from './Data'
function Home() {
return (
<div>
<HeroSection {...homeObjOne} />
</div>
)
}
export default Home
thats how i import object

You have created addPagesObjOne as a JS Object.
To access the properties within this object and assuming addPagesObjOne has been:
Imported into the component with your JSX or
Within the component file
Then to correctly reference a property see this example:
<img src={img} alt={alt}/>
will become
<img src={addPagesObjOne.img} alt={addPagesObjOne.alt}/>
Update:
I can see that you have provided an update to how you have laid out your code, I created a quick sandbox here your code works fine. Maybe your assest is not in the correct place?

Nested Image Array Fails to Load

I'm relatively new to react and javascript (I'm usually backend Java). I'm currently trying to make an image gallery, where the subsections are clicked on and thumbnails of the images within each section are displayed. The thumbnails can then be clicked on and open a lightbox (I'm utilizing simple-react-lightbox for this and am on the latest version).
It works, but inconsistently. Sometimes when I click on the thumbnail, instead of throwing up the lightbox and being able to click through the images, it takes me directly to the full sized image.
My nested array with the image data, (imports of images omitted)
const GALLERIES =[
{
name: 'Beaded Jewelry',
id: 'beadwork',
description: 'placeholder',
resources:[
{
id: 1,
thumbnail: bluependant,
url: blue,
title: 'Blue Swarovski Pendant'
},
{
id: 2,
thumbnail: greenpendant,
url:green,
title: 'Green Swarovski Pendant'
}
]
},
{
name: 'Wire Jewelry',
id: 'wirewrapped',
description: 'placeholder #2',
resources:[
{
id: 'wire1',
thumbnail: wire1Thumb,
url: wireWrap1,
title: 'placholder 1'
},
{
id: 'wire2',
thumbnail: wire2Thumb,
url:wireWrap2,
title: 'placholder 1'
}
]
}
];
export default GALLERIES
And the js that I'm trying to make work consistently.
import React from 'react';
import '../css/gallery.css';
import '../css/jewelry_main.css';
import GALLERIES from '../data/galleries';
import SimpleReactLightbox from "simple-react-lightbox";
import { SRLWrapper } from "simple-react-lightbox";
import {Link } from 'react-router-dom';
const Gallery = props =>{
const{thumbnail, url, title } = props.subgallery;
return(
<div className="gallery">
<a href={url} data-attribute="SRL">
<img src={thumbnail} alt={title} />
</a>
</div>
)
}
const JewelryGallery = ({match}) =>{
const gallery = GALLERIES.find(({ id }) => id === match.params.keyword)
return(
<div>
<div className="frosted">
<p>{gallery.description}</p>
</div>
<SimpleReactLightbox>
<SRLWrapper>
{
gallery.resources.map((SUBGALLERY) =>{
return(
<Gallery key = {SUBGALLERY.id} subgallery={SUBGALLERY} />
)
})
}
</SRLWrapper>
</SimpleReactLightbox>
</div>
);
}
export default JewelryGallery;
Any insight or wisdom would be greatly appreciated! Thank you!
UPDATE EDIT: I noticed something, the first subgallery I click into will always present with the lightbox, but the second one, consistently fails and instead goes directly to the fullsize of whichever image I have clicked on. (It doesn't matter which of the two I pick first, the second always fails.) But I can't discern why the lightbox would not get applied to the second gallery I select.

There are only two things I can see that differ from the documentation for the simple-react-lightbox package.
First thing is, with the latest version, you only need to use the <SRLWrapper> component. You have both the <SRLWrapper> and the <SimpleReactLightbox> component in use. Perhaps try getting rid of the old version if you have the latest version of the package installed.
Second thing is the structure of your Gallery component return has the div wrapping the elements. I'm not sure if this would cause any problems but, to get as close as possible to the example in the docs you could try using a fragment instead of a div.
const{thumbnail, url, title } = props.subgallery;
return(
<>
<a href={url} data-attribute="SRL">
<img src={thumbnail} alt={title} />
</a>
</>
)
I haven't used the package so this is a bit of speculation. Hope it leads you in the right direction though.
EDIT
I think I misunderstood this library a bit. You do need both of those components. It looks like if you want to display full size images, you would do it the way you have it currently. However, if you want to use the lightbox feature with the nav at the bottom you would need to do something like:
<SimpleReactLightbox>
<SRLWrapper>
<div id="content-page-one" className="container content">
<div className="row">
{
gallery.resources.map((SUBGALLERY) =>{
return(
<Gallery key = {SUBGALLERY.id} subgallery={SUBGALLERY} />
)
})
}
</div>
</div>
</SRLWrapper>
</SimpleReactLightbox>
And then you would use div instead of an anchor tag:
<div className="col-md-6 col-12 col-image-half">
<img src={thumbnail} alt={title} />
</div>
This is pulled from the Code Sandbox examples they have. I would take a closer look there and see if they have the exact setup you're looking for. Notice also that they are using the Bootstrap styling framework as well, so in order for those styles to work you would need to install bootstrap to your dependencies.