Images not rendered when I use Brave browser but when I use other browsers i.e. Chrome, the images in my app are rendered.
as you can see in my code I created an object that handles all the images so that I can dynamically import those images in my components.
const Assets = {
logo: require('./logo.svg').default,
spots: require('./spots.svg').default,
};
export default Assets;
here is the component that imports some of those images:
import Assets from '../Assets/Index.js'
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="fixed">
<Toolbar variant='regular'>
<Button className='button-image__logo' variant="text">
<img src={Assets.logo} alt="logo" />
</Button>
<Button className='button-image__spot' >
<img src={Assets.spots} alt="car-spot" />
</Button>
<Button variant="text" color="primary" size='large'>Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
other stack overflow solutions say that I should reinstall webpack, this I have done but the problem still persists.
I have also tried clearing Brave's Cache, it does not change anything.
Is it a problem with Brave Browser or React itself and what can I do to fix this?
NB: I used yarn create react-app
Related
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.
I have a React app but when I try and render a PNG file in the "src" folder, I get the following on the Google Chrome browser:
There is no Public folder in my project, so I am unable to place the image file there.
The following is my code when loading the image:
What can I do instead?
Many thanks!
You can solve that using 2 simple ways, one of them is to take the image address as a constant, the other one can be passing the address directly. To clarify the images cannot be outside(no absolute path) of your project, i.e. the direction to your image should be as follows
../splunk-logo.png
import "./styles.css";
const image = require("./Landscape.jpg");
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{/* One way */}
<img src={image} alt="Landscape img" height="200px" />
<br />
{/* Second way */}
<img src={require("./Landscape.jpg")} alt="Second Land" height="200px" />
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Test Here
How do I store an image in my assets folder and render it on my NavBar?
It works fine when done locally but there are difficulties when doing the same through the web via GitHub Pages.
import * as React from 'react';
import { AppBar, Toolbar, Typography } from '#material-ui/core/';
class NavBar extends React.Component {
public render() {
return (
<div className='navbar'>
<AppBar position='static' color="inherit" >
<Toolbar style={{ paddingLeft: '1em', paddingRight: '1em' }}>
<img className="navbar-logo-favicon" src="../some_logo.png" height="35" width="35" />
<Typography variant='title' color='default'>
Project C
</Typography>
</Toolbar>
</AppBar>
</div>
)
}
}
export default NavBar
What would be the standard way to solve this issue?
I have searched extensively on google and stack overflow. Most of the solutions were bad path or case-sensitive faults, which seems to be not the case.
were bad path
You do have a bad path. Ensure that when developing locally ../some_logo.png is consitent with what is deployed in public
Example
If locally you are serving up public folder and it works (/img/some_logo is valid):
project
src
public
img
some_logo
On github pages public should be available at something.github.io/ (so that /img/some_logo is still valid)
I am trying to map the response I get from an api call. I want to render a div in this map. This is what my code looks like:
<div data-simplebar className="img-scroll">
{this.state.imageSearchResults.items.map((item, ind) => {
return <div className="image-square" style={{backgroundImage:`url(${this.state.imageSearchResults.items[0].link})`}}></div>
})}
</div>
I am getting an error saying
Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
What is wrong with this? I have done mapping in same way in the past and never got such an error.
Wrapping up the translatable text within <p> or <span> sorted out issue for me
Looking at this <div data-simplebar className="img-scroll"> in your question, it looks like you are using the 'simplebar' plugin, which changes the DOM tree and breaks React.
Try to use the package for React 'simplebar-react' instead, it works correctly.
React example:
import React, { Component } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<SimpleBar style={{ height: '300px' }}>
{[...Array(50)].map((x, i) =>
<p key={i} className="odd">Some content</p>
)}
</SimpleBar>
</div>
);
}
}
export default App;
If anyone stumbles upon this problem while a page is being translated in Google Chrome, it's likely it has something to do with this:
https://github.com/facebook/react/issues/11538
It's an old issue that's yet to be solved by the Chrome team:
https://bugs.chromium.org/p/chromium/issues/detail?id=872770
Please add a reasonable key prop to the children.
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.