I have been following a YouTube tutorial for making a website using react.js.
index.js:
import { Img, ImgWrap } from './InfoElements';
const InfoSection = ({ img, alt)} => {
return(
<>
<ImgWrap>
<Img src={img} alt={alt}/>
</ImgWrap>
</>
)
}
export default InfoSection
I have been exporting image src from another folder named Data.js
Data.js:
export const homeObjOne = {
img: require("../../images/svg-1.svg"),
alt: 'error404'
}
I used styled-components for style
InfoElements.js:
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const Img = styled.img`
width: 100%;
margin: 0 0 10px 0;
padding-right: 0;
`;
Here image is placed on
src->images->svg-1.svg
I tried using other images like jpe, jpg and png rather than svg but still its not working. The image is not showing on background.
Here is the picture the way image return:
Here is the path of image folder:
I have been tried all other image format and result is same..Is their anything I done wrong
Your structure is falling victim to a default export naming issue. When you require your image in Data.js, you're setting it as a module. If you want to access the URL of the image, you need to use:
export const homeObjOne = {
img: require("../../images/svg-1.svg").default, //note the default part at the end
alt: 'error404'
}
Although this could be made cleaner using imports:
import homeObjOne from "../../images/svg-1.svg";
export const homeObjOne = {
img: homeObjOne, //no need for default here, thanks to import
alt: 'error404'
}
Note: If you inspect your image whilst it is broken, you'll see the src will be [object Object].
Follow this article https://www.freecodecamp.org/news/unable-to-find-images-based-on-url-in-react/.
Move images folder under /public not /src.
In data.js
img: "./images/svg-1.svg"
Or use you can use import, like this import image1 from "./images/1.jpg
Related
I have created simple image component and imported the image. Now, I would like to display it with storybook, but not sure how to pass this component correctly inside a story.mdx file. Could you please help?
Here is the image component:
import { string, urlPropType } from "prop-types"
import * as Styled from "./Image.styled"
import image from "./image/cutedog.jpg"
const Image = ({ src, alt }) => (
<Styled.Image>
<img src={image} alt={dog} />
</Styled.Image>
)
Image.propTypes = {
src: urlPropType.isRequired,
alt: string.isRequired,
}
export default Image
here is styled.component:
import styled from "#emotion/styled"
export const Image = styled.div`
display: inline block;
float: left;
width: 100%;
border radius: 5rem;
`
And I already started to write mdx story, but it si not working so far :(
import { Meta, Canvas, Story, ArgsTable } from "#storybook/addon-docs"
import Image from "../Image"
<Meta title="Components/Image" component={Image} />
# Image
<Canvas>
<Story
name="Overview"
args={{
src: "arrowDown",
alt: "medium",
}}
>
{Template.bind()}
</Story>
</Canvas>
<ArgsTable />
export const Template = (args) => <Image {...args} />
maybe someone could help ?
I would like to center the selected image instead of having it showing on the left hand side.
See image of behaviour:
I'm using the packages from the sandbox below in Next.js 11 with TailwindCSS 2.2.4:
https://codesandbox.io/s/5vn3lvz2n4
Dependencies:
"react-images": "^1.2.0-beta.7",
"react-photo-gallery": "^8.0.0"
I'm having a hard time targeting the CSS class, but I narrowed down to:
class="react-images__view react-images__view--isModal css-1qrom1v css-1ycyyax" using the browser dev tool in Safari.
Below is my PhotoLibrary file:
import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "../data/photoData";
export default function PhotoLibrary() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div>
<Gallery photos={photos} onClick={openLightbox} />
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={photos.map((x) => ({
...x,
srcset: x.srcSet,
caption: x.title,
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
}
Has anyone played around with the carousel in Next.js and able to see what I'm doing wrong? If you have a better solution I'm open to that too.
Add the following CSS to your globals.css file.
.react-images__view-image--isModal {
display: inline-block;
left: 50%
}
I am trying to test CSS properties that i have defined inside a class in css, wing the react testing library. However I am unable to do so.
Adding the simplified snippets.
import React from "react";
import { render, screen } from "#testing-library/react";
import '#testing-library/jest-dom/extend-expect';
import styled from "styled-components";
const Title = styled.span`
display: none;
background: red;
`
test("testRender", () => {
render(
<div>
<Title>Test</Title>
</div>
)
const spanElement = screen.getByText("Test");
const elementStyle = window.getComputedStyle(spanElement);
expect(elementStyle.display).toBe('none');
});
The test fails at the expect statement. I have tried refactoring to traditional css, there also the test fails. In both cases, I have tested it manually and the styles are taking effect.
I also understand that we should not directly test CSS properties, but I have tried testing the visibility with toBeVisible(), but that only works if the display: none is directly entered as a style, and not as part of a class.
This should be a very simple thing, that works out of the box, but I have been at it for some time now, without any luck.
Any help is appreciated.
I agree with #ourmaninamsterdam answer.
In addition, for checking appearance or disappearance of any element, you can also use .not.toBeInTheDocument like so:
expect(screen.queryByText("Test")).not.toBeInTheDocument();
NOTE: You must use queryByText instead of getByText in this case since queryByText wont throw an error if it doesn't find the element (it will return null).
Official docs Reference - https://testing-library.com/docs/guide-disappearance#nottobeinthedocument
You can use expect(screen.getByText("Test")).not.toBeVisible();
import React from "react";
import { render, screen } from "#testing-library/react";
import "#testing-library/jest-dom/extend-expect";
import styled from "styled-components";
it("does display", () => {
const Title = styled.span`
display: block;
background: red;
`;
render(
<div>
<Title>Test</Title>
</div>
);
expect(screen.getByText("Test")).toBeVisible();
});
it("doesn't display", () => {
const Title = styled.span`
display: none;
background: red;
`;
render(
<div>
<Title>Test</Title>
</div>
);
expect(screen.getByText("Test")).not.toBeVisible();
});
...see the sandbox: https://codesandbox.io/s/blazing-river-l6rn6?file=/App.test.js
I have a React project and the goal is to have no .css files. I'm currently refactoring existing .css code to make use of styled-components in a Typescript React project.
Previously images were being called as background in a .css class
a.item.overview {
background: url(../img/overview.svg) no-repeat 16px 50% / 20px 20px;
margin-top: 20px;
}
The approach I've taken for the images was converting the .svg files into react components.
import React from 'react'
import styled from 'styled-components'
import Icon from './Icon'
const Svg = styled(Icon)`
margin-top: 20px;
fill: red;
height: 20px;
width: 20px;
fill-rule:evenodd;
clip-rule:evenodd;
`
export const OverviewIcon = () => (
<Svg viewBox="0 0 20 20">
<path
d="X4.2,2.5k11.2c0...."
/>
</Svg>
)
What i'm trying to achieve now is to create a component that will allow me to pass my image component into it as a property.
Ideally I would have one menuItem component that I can just pass an image component to and add some text. Something like the example below.
I'm relatively new to React so if my approach is incorrect or convoluted, I'm happy to make a change.
This is the approach I've attempted but it hasn't worked
type Props = {
image: React.ReactNode
}
export const LMenuItem = ({image}: Props) => (
<div>{image}</div>
)
This approach finally worked.
type Props = {
children: React.ReactNode
}
export const LMenuItem = ({children}: Props) => (
<div>{children}</div>
)
I am using jsx to define styles for the NextJs components and i need to define a background image for some elements.
The only paths that seems to accept is the relative path, to the current page, or absolute path.
But how to pass a relative path to the component itself?
Here a simple component function for testing:
import React from 'react'
const TestComponent = (props) => {
return (
<div>
<h1 className="test">See my background</h1>
<style jsx>{`
.test {
background-image: url("someImageFile.jpg");
}
`}</style>
</div>
)
}
export default TestComponent
This will return the 404 error for url "localhost:3000/current page/someImageFile.jpg"
For a NextJS application, you should have a public folder at the root of the directory of your app where you store all the static files: such as images.
Here is a link to the official documentation where they explain it very clearly:
https://nextjs.org/docs/basic-features/static-file-serving
The trick is to use $ to be able to call require function:
<style jsx>{`
.test{
background-image: url(${require("./someImageFile.jpg")});
}
`}</style>
Reference documentation here.