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" />
Related
im trying to put an image in my page but it wont show up.even though there are no errors here is my code:
import React from "react";
import img1 from './images/earth-icon.png';
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src={img1} alt="cam" />
</div>
)
}
thank you!
i tried to put the image in the public folder and try it like this:
import React from "react";
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src="./images/earth-icon.png" alt="cam" />
</div>
)
}
but its the same result.
If you put the image directly into the public folder, then the path of the image changes.
So, if your image is placed like this:
- public
- earth-icon.png
// other folders like src etc.
Instead of
<img src="./images/earth-icon.png" />
try
<img src="/earth-icon.png" />
This url will get translated to https://example.com/earth-icon.png which will point to your public folder.
If you need the same folder structure with images etc. Ensure that the image is placed under a images folder inside public. The you would be able to do:
<img src="/images/earth-icon.png" />
Note that ./ points to the current directory whereas just / points to the public folder
i placed the images folder in the public folder and then i edited the code to be like this:
import React from "react";
export default function Navbar() {
return(
<h2 className="title">My Travel</h2>
<img src="/images/earth-icon.png" alt="" />
</div>
)
} but its the same result no image.
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 :)
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/
I am attempting to import some local pictures in a JavaScript file 'Photos-Photos.js' and export those pictures to be used in another JavaScript (React) file in order to avoid a bunch of imports in my main React file 'Photos.js'
I have attempted to put all of the images in a single object but I have now just resorted to exporting every variable holding the local path to the photos
In a nutshell, here is my Photos.js (React) file
import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import * as Pics from "./Photos-Photos";
class Photos extends Component {
render() {
return(
<div className="main-body-wrapper">
<main className="body-content">
<div className="slideshow-row-wrapper">
<div className="slideshow-row-content">
<div className="slideshow-title-wrapper">
<div className="slideshow-title">
<h3>Sustainabilibash</h3>
</div>
<div className="photo-credz">
<p>Photos by: John Doe</p>
</div>
</div>
<div className="main-slider-wrapper">
<div className="main-slider-content">
<Carousel>
<Carousel.Item>
<img className="d-block w-100" src={Pics.AlChE1} alt="pic" />
</Carousel.Item>
<Carousel.Item>
<img className="d-block w-100" src={Pics.AlChE2} alt="pic" />
</Carousel.Item>
</Carousel>
</div>
</div>
</div>
</div>
</main>
</div>
);
}
}
Here is my 'Photos-Photos.js' file where I am exporting the images
export const AlChE1 = "./../images/photos/AlChE/AlChE-0.jpeg";
export const AlChE2 = "./../images/photos/AlChE/AlChE-1.jpeg";
I am receiving no errors; however, instead of displaying the image, I am being displayed with the alt text, 'pic'. I have attempted to just import every image in the 'Photos.js' React file and it works perfectly, but I don't want a bunch of imports in that file (The number of exported images in the 'Photos-Photos.js' code above is only ~ 1/10 of the images I need to use for this page)
one thing you can do its on each img tag import it's own pic like
img src={require('~/myphoto.jpg')}
and if you make the carousel manually and render the photos one after one you get tou your goal
I have a dumb component that gets passed down props from a weatherAPI. I want to be able to dynamically change the SVG image depending on what gets sent back from the API. I have installed an npm module react-svg: https://github.com/atomic-app/react-svg. This has a dependency of svg-injector: https://www.npmjs.com/package/svg-injector which I have also installed. I am currently running all the right versions of npm, react and react-dom that these dependencies depend on. For now, I am just trying to pull in an SVG using the react-svg module. Here is the file:
import React, {PropTypes} from 'react';
import styles from '../common/contentBoxStyles';
import ReactSVG from 'react-svg';
const WeatherReport = ({report}) => {
return (
<div style={styles.body} className="row">
<div style={styles.weatherBoxContainer}>
<div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<ReactSVG path={'../common/svg/O1n.svg'} callback={(svg) => console.log(svg)} />
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4">
<div>{Math.floor(report.main.temp_max)}°</div>
<div>{Math.floor(report.main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.main.temp)}°
</div>
</div>
</div>
CA
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
Report
</div>
UT
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
Report
</div>
MN
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
Report
</div>
DC
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
Report
</div>
NY
</div>
</div>
</div>
);
};
WeatherReport.propTypes = {
report: PropTypes.object
};
export default WeatherReport;
Here is the file tree for reference:
src
|_ _components
| |_ _dashboard
| | |_ _WeatherReport.js
| |_ _common
| |_ _svg
| |_ _O1n.svg
Am I missing something that needs to be done here? Does anyone have any suggestions on how I can trouble shoot this? I should note that I have attempted to place the SVG inside the dashboard folder as to ensure a direct path to see if that would work. Unfortunately, it does not.
My console is currently logging through my callback property:
Unable to load SVG file: ../common/svg/O1n.svg
undefined
The callback property is working for react-svg.. It is the path that cannot be resolved and I am unsure as to why. If you have any other simple suggestions on how else I can approach the goal I am trying to reach outside of react-svg, feel free to mention.
Thanks for any time spend answering or helping with this current dilemma that I am facing.
Your ReactSVG's path needs to be relative to the document root you're serving from NOT relative to the js file that contains ReactSVG
Hi I'm using this plugin: react-inlinesvg
With this is I can load a local file like this:
import SVG from 'react-inlinesvg';
<SVG src="../../images/logo.svg">
</SVG>
You can import the svg inline with something like this
export const Logo = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 27" {...props}>
<path
d="M112.2,9.6h-0.6v...z"
/>
</svg>
);
then
import { Logo } from "../path/to/file"
This is cool because it gives you more options to play with besides just fill