In my react app, I tried displaying an image as a logo of my website in top navigation bar as follows:
I copied logo.png in the same folder as my NavBar.jsx.
Added following in NavBar
<img
src={logo}
width="30"
height="30"
/>
It gets displayed correctly when I browse http://localhost:9001/, but when I try accessing inner pages, say http://localhost:9001/courseware/course/, it shows broken image.
Then I tried to try it another way. I copied the image in public/images/logo.png and then trying displaying it as:
import logo from "./logo.png";
<img
src={`${process.env.PUBLIC_URL}/images/logo.png`}
width="30"
height="30"
/>
But now it does not show up on any page.
What I am doing wrong?
PS: I am running this app from vscode debug mode.
I think if you want to use image in your element, you have to import it before. You can not use variable in src{} without importing. Import it with complete address, then use it with the name you wrote, in src{}.
Related
I'm trying to insert and style an image in my modal but I'm having trouble doing it. I've tried wrapping the image under a div and apply properties to that div but it doesn't seem to be working either. I've created a link to my sandbox: https://codesandbox.io/s/react-modal-rx1dz?file=/src/App.js
Thank you!
Instead of using simple string, you need to ref the image using require
<img src={require('./modal.jpg')} />
You can also use import
import img from "./modal.jpg";
<img src={img} />
I also changed a little bit the style in order to fit inside the div
https://codesandbox.io/s/react-modal-forked-mpkzm
I have an issue with Frontity React, where it loads up featured images fine and some other images, but quite a lot of image which are added to the page either from a plugin (such as foogallery)
<figure class="fg-item-inner"><span class="fg-image-wrap"><span height="300" width="200" class="css-pxqjd2-Container e16qyzlb0"><img alt="" class="frontity-lazy-image skip-lazy fg-image" loading="lazy" width="200" height="300" data-src-fg="2109218829.jpg" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22300%22%20viewBox%3D%220%200%20200%20300%22%3E%3C%2Fsvg%3E"></span></span><span class="fg-image-overlay"></span><figcaption class="fg-caption"><div class="fg-caption-inner"></div></figcaption></figure>
Any idea what might be causing this?
FooGallery adds a placeholder SVG for its lazy loading, which is replaced when the gallery JavaScript runs. You can disable lazy loading for the gallery (or for all galleries via settings page) which will stop this behavior.
I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs
I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.
My main page displays a list of post, with an icon at the beginning of each popst.
When I click next page (paginator), all lines are displayed without icons. There is an square insstead of the icons.
Thank you for your help
I'm linking the icon in the following way
<img src="webroot\img\cake.icon.png" alt="Smiley face" height="42" width="42">
webroot\img\cake.icon.png appears to be a server path, not a URL path, which is what's needed.
Try changing the image's src attribute to /img/cake.icon.png or, if your CakePHP installation is in a subdirectory, to /subdir/img/cake.icon.png