We Keep Coding

Problems importing images with react .tsx

So I’m trying to import 2 images in this code. They are located in the same folder as the .tsx file
import * as React from 'react'
import './index.css';
import image from './image.jpg';
import image2 from './image2.jpg';
export default function Sl2() {
return (
<div>
<h1
Introduzione
</h1>
<p>
Lorem ipsum
</p>
<img src={image} style={{ width: '200%', height: '200%', transform: 'translate(110%, 0%)' }} />
</div>
)
}
Now if I edit src={image} with src={image2} it doesn’t work, even if both of the images are in the same folder. The error giving is “module not found”. It seems to only work with image and not image2. I also tried editing the “image.jpg” name to something else, and then I also changed it in the code, but everything seems to work ONLY if the image imported has the name “image”

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.

Browser does not render images in React App

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

Creating a content security policy for embedded Google Maps iframe

I've created a React component for an embedded Google Maps iframe which works as intended. However, the browser console repeatedly warns me about the content security policy:
I went looking for solutions, but I only found answers related to the API. The concepts of content security policy and manifest.json is new to me and something I'll look into moving forwards, but for now I only need help setting up the manifest.
Manifest
"permissions": [
"https://www.google.com/maps/*"
],
"content_security_policy": ""
Component
import React from "react";
export default function GoogleMap(props: {
title: string,
src: string,
width?: string,
height?: string
}) {
return (
<iframe
title={ props.title }
src={ props.src }
width={ props.width || "100%"}
height={ props.height || "450"}
loading="lazy"
></iframe>
)
}
Component call
import React from 'react';
import './App.css';
import Jumbotron from './components/Jumbotron';
import GoogleMap from './components/GoogleMap';
function App() {
return (
<div className="container">
<div className="row">
<div className="col">
<Jumbotron>
<h1>Hello World!</h1>
<p>Something, something</p>
</Jumbotron>
</div>
</div>
<div className="row">
<div className="col">
<GoogleMap
title="Map of Mobit Stakkevollvegen"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d490.15681762061814!2d18.969382885920925!3d69.66688347864422!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x45c4c45ca1720dbb%3A0x48debf799412e7a8!2sMobit%20Stakkevollvegen!5e0!3m2!1sno!2sno!4v1624610965243!5m2!1sno!2sno"
/>
</div>
</div>
</div>
);
}
export default App;
What do I put into the manifest.json in order to remove the browser console warnings in a secure manner?

I am not sure if these warnings are exclusive to Firefox, but this reddit post seems to say that these warnings are caused by something on Google's end. Therefore, although you should implement a CSP to secure your app, I do not think doing so will remove the warnings.

React Material-UI Card Image Component

Having an issue displaying images. Looking at the documentation and I don't know what I am missing.
I can't get the image component to show.
This is all from WhatsNew.js, I am calling an IG logo
import { ReactComponent as Instagram2 } from '../images/instagram2.svg'
Below I am also calling for a media file that is in the same folder but I get a non working image.
<CardMedia
image='../images/blog-post-01.png'
style={{height: 140}} />
<CardContent>
Here is my live link and this is the repo GitHub

I think what you are doing now is right. Your image address/url is wrong. I tried this with a url of an image on the internet and it works.
<Card>
<CardMedia
image="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80"
style={{ height: 140 }}
/>
</Card>
Try this in the URL. It might work.
image="/static/images/blog-post-01.png"
OR import the image
import blog from '../images/blog-post-01.png';
<CardMedia
image={blog}
style={{ height: 140 }}
/>

the image to show must be given as object like this :
<CardMedia
image={Instagram2 }
style={{height: 140}} />
<CardContent>