We Keep Coding

localhost server not displaying image (React)

I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.

import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.

How to show a specific image from a group as the one in focus

Greetings fellow nerds,
Hope you had a great thanksgiving. I have been working on my portfolio website lately and have almost completed it. Luckily this time I saved the best problem for last, but I haven't had any luck hacking it.. so hopefully one of you has a helpful answer.
So here's the problem:
I have a slider on my front page which at the moment shows the slider starting from the top of the 1st image. Which makes sense of course. But what if I would wish to have it start in focus on the 2nd image?
I tried something with the index without any luck. But here's two pictures that can hopefully help explain the problem:
Bad:
Good:
Scroll container code:
import React from "react";
import { ProjectData } from "../projects/ProjectData";
import ProjectImage from "./ProjectImage";
import ScrollContainer from "react-indiana-drag-scroll";
import "./scss/ProjectCarousel.scss";
export default function ProjectCarousel() {
return (
<ScrollContainer className="scroll-container">
{ProjectData.map(({ id, ...otherProps }) => (
<ProjectImage key={id} {...otherProps} />
))}
</ScrollContainer>
);
}
Project image component code:
import React from "react";
import GitIcon from "../soMe/icons/github_legend.png";
import "./scss/Project.scss";
export default function ProjectImage({ imageUrl, alt, github,
webUrl }) {
return (
<div className="image">
<a href={webUrl} alt="Go to this project's website">
<img src={imageUrl} alt={alt} />
<a href={github} alt="See project on Github">
<div className="overlay">
<img src={GitIcon} alt={alt} />
</div>
</a>
</a>
</div>
);
}
Appreciate any hints or solutions

The images required a fixed height to be rendered and picked up by the scrollto

React Bootstrap Element type is invalid

I am trying to implement the navigation bar component offered by react-bootstrap. But I am getting a weird error. Below is the screenshot of the stacktrace.
This is my code for navigation bar.
import React from "react";
import {Navbar, Nav, NavItem} from "react-bootstrap";
import navigationbarlogo from "../assets/images/navigationbarlogo.png"
import navstyle from "../assets/css/NavigationBar.css"
class NavigationBar extends React.Component{
render() {
return (
<Navbar bsStyle="inverse">
<Navbar.Header>
<Navbar.Brand style={navstyle}>
<img src={navigationbarlogo} alt={'logo for navigation bar'}/>
Tweelyze
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Analytics</NavItem>
<NavItem eventKey={2} href="#">About Us</NavItem>
</Nav>
</Navbar>
);
}
}
export default NavigationBar;
I am not able to figure out what is wrong here

check your imported component. we use import {component-name} from '' to import named export and import 'any-component-name' from '' to import default import.

I think it's the way your importing your styles, this error usually occurs when the module you imported does is not found. Can I see the directory of your file so that we can check if it loads there correctly?

Modifying Shopify Polaris Styles - Reactjs

I am trying to modify Shopify Polaris Button components colors for React, I tried to change style.css file but nothing happened.
Any idea how to do so?
App.js
import React, { Component } from 'react';
import '#shopify/polaris/styles.css';
import {Page, Card, Button} from '#shopify/polaris';
class App extends Component {
render() {
return (
<div className="App">
<Page title="Example app">
<Card sectioned>
<Button onClick={() => alert('Button clicked!')}>Example button</Button>
</Card>
</Page>
</div>
);
}
}
export default App;
I am trying to modify node_modules/#shopify/polaris/styles.css , but it does not make ay effect to button color.

The Polaris design system is meant to provide consistency to apps within the Shopify ecosystem. It’s not intended as an alternative to something like Bootstrap or Foundation, so changing button colors wasn’t something we built the library to support.

Even thou full colorizing on a button isn't possible. You can partially modify a button like so:
<div style={{color: '#bf0711'}}>
<Button monochrome outline>
Click Me
</Button>
</div>
This won't give you full control to like the background color but it can help to partially stylize the button. It creates an outline and light background when you roll over.

Component does not see global styles

Component from globalstyle
Global styles are visible only in this component, col-lg-2,col-md-4 -> globalstyle
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style
ReactDOM.render(
<AppContainer>
<BrowserRouter>
<App/>
</BrowserRouter>
</AppContainer>,
document.getElementById('root')
);
Component that should get styles
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'
const Header = () => (
<div className="row">
<div className={`col-lg-2 col-md-4 ${styles.test}`} > //Here is not available
<Link to="/категории">
<div className={styles.logoBox}>
<img src={icon} alt="logo"/>
<h1>Белый кот</h1>
</div>
</Link>
</div>
</div>
);
export default Header;
Webpack.config https://github.com/minaev-git/TestQuestion

Try adding global to your class name.
Eg
:global(.yourClass) {
//your css
}

Those styles will only be loaded if <Header /> appears somewhere in <App />. I'm assuming that's the case, but otherwise make sure that the header component shows up in <App />. If that's not working, try looking around your Network tab of the web inspector and reload the page -- see if your CSS is even being loaded.
EDIT: Just seeing where in the code your class isn't working. If .test is a class in your global styles file, it wouldn't show up in the Header.css file. Try removing "styles" and just give it a class of test if test is a class in flexboxgrid.min.css.

Import for CSS is
import './Header.css'
Reference the css classes in your component then with:
<div className="col-lg-2 col-md-4 test" >

You would need to import bootstrap to your index.jsx, currently you are only importing this, require('./basestyle/flexboxgrid.min.css') that is not enough, how will your system know that there is boostrap if its not imported