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 prevent laravel from overriding css files after react compilation?

I have a Laravel project where we are using React for new components but about half of the existing pages are older and just use the regular blade files.
In the public folder we have a few css files that are included in app.blade.php which serves as out top file.
Now, it works perfectly until we try to import React Component. As soon as i do this, it recompiles the css in some weird way that it just breaks. All previously used css just seems to stop working.
This is my mix file:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css')
An example React Component i'm testing (comes from the laravel + react babel preset, i just added the css import):
import React from 'react';
import ReactDOM from 'react-dom';
import './Example.css'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="txt-color-white card-header">Example Component</div>
<div className="txt-color-white">ISTO É UM TESTE</div>
<div className="txt-color-white card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
And this is my public folder. I'm assuming react css is being thrown into the app.css file but instead of being added (appended) is doing something weird.

Cannot load images from my desktop on React

enter image description hereI have a folder Images on my desktop with .jpg and .svg on my src file that I would like to add on a component but I cannot load them. I don't understand what I'm doing wrong. Can someone help?
import React from 'react';
import './Banner.css';
const Banner = () => {
return (
<div className="banner">
<img src="../Images/banner.bg.jpg" alt="banner" />
<div className="text">
<img src='../Images/party-icon.svg' alt="party" />
<h3>Let's The Fun Begin!</h3>
<p>Thanks for your order, we'll have it with you as soon as possible.<br></br>
Your order number is #10293838 and a confirmation email has been sent to the address provided.</p>
<p>Order Even Faster in Future</p>
<button className="button">CREATE AN ACCOUNT</button>
</div>
</div>
);
}
export default Banner;

You can import those separate images & use it on src, or you can use require.
If you place your Images directory inside public folder then you can access your images directly like this
src="/Images/banner.bg.jpg"
Check the answers of this question (Correct path for img on React.js), I think that may help you to understand those solutions better.

1 - Your images should sit inside your project source (usually in a 'assets'/'images') folder.
2 - Make sure that the source path in <img src='../Images/party-icon.svg' alt="party" /> is relative to the current file and points to the party-icon.svg sitting in your assets folder.

You may import the pic on top like this:
import bg from '../Images/banner.bg.jpg'
then add your pic like this:
<img src={bg} alt="banner" />
you can do the same thing for other pics. Instead of bg you can write anything you want. Choosing appropriate names for different pictures can be better.
Good luck :)

React Image Source

I can't seem to figure out why my relative path image loading doesn't work.
The file structure where the assets are located are within the src folder in my working directory, but they don't seem to be working.
If I directly import import image from '../Assets/color/cloudy.svg'it works but otherwise it doesn't work. I don't want to directly import as the logic is to query the appropriate image (27 total images) based off the value passed through props.
Any help would be appreciated.
export default function Main(props) {
const { weather } = props;
// let img_src = weather.weather_code.value;
const img_src = '../Assets/color/cloudy.svg';
console.log(img_src);
return (
<div className="center">
<div className="title">
<span className="currently">
<span>
<img src={img_src} alt="weather" />
</span>
<span className="description">
<span className="summary">
<span className="label">Temperature:</span>
<span>
{weather.temp.value} {weather.temp.units}
</span>
</span>
<span className="summary-high-low">
<span className="label">Feels Like:</span>
<span>
{weather.feels_like.value} {weather.feels_like.units}
</span>
</span>
</span>
</span>
</div>
</div>
);
}

One simple way is to create a folder under the public/ folder on your app, and put all images there.
and then in dev mode you can acc them like this:
<img src="/imageFolder/cloudy.png" alt="cloudy" />
This should work just fine in production too, because the folder under public is added to the project.

If you are using webpack, you need to import the image :
<img src={require('images/06.jpg')} alt="product" />
As your images data is dynamic, directly specifying the import path like
<img src={require(image)} alt="product" />
doesn't work.
However you can import the image by making use of template literals like
<img src={require(`${image}`)} alt="product" />

React lazy load image in a component that is passed image source as a property

I have a React app created with create-react-app. It contains the standard src/ directory and I have created a src/assets/home/ directory where I have saved image files that I intend to use in my project. I am not sure how to get the image referencing correctly within components in my app.
I have the following component that I pass a set of properties whose path is src/scenes/Home/InfographicSection/InfographicBlock/InfographicBlock.js:
<InfographicBlock
title="Some Title"
description="some text"
imgPath="../../../../assets/home/home-logo.png"
/>
The InfographicBlock uses the library react-lazyload (https://www.npmjs.com/package/react-lazyload):
import React from 'react';
import LazyLoad from 'react-lazyload';
const InfographicBlock = (props) => (
<div className="infographic-block columns">
<LazyLoad height={200}>
<img src={require(`${props.imgPath}`)} alt="" />
</LazyLoad>
<div className="content-container column">
<h2 className="subtitle">{props.title}</h2>
<p>{props.description}</p>
</div>
</div>
);
export default InfographicBlock;
The image referencing works great if I add the string path directly to the image tag like so:
<img src={ require('../../../../assets/home/home-logo.png') } />
However seeing as this is a component, I want to pass in the property as a variable to reuse the component.
I have tried variations of this without success:
<img src={require(`${props.imgPath}`)} alt="" />
Any help is appreciated.

What i did was import the image first.
import product1 from './Images/female_sport3.jpg'
<ProductPage currency={currency} currencyRate={currencyRate} product1={product1}></ProductPage>
Inside ProductPage.js
const {currency, currencyRate, product1} = props
<img src={product1} alt=""></img>
This is the reference for import image: https://www.edwardbeazer.com/importing-images-with-react/