This is the component I am trying to render which is being mapped over and the necessary props are being dropped in. One of those props are an image that is sitting in the local directory. When i type in that same '..images/example.png' it will load with out a problem. But when this data is being mapped over and the image directory is being dropped in as the image prop, it says that it cannot find the module. Any ideas why or what I can do to remedy this?
import React, {Component} from 'react';
import {Link} from 'react-router-dom'
class Project extends Component {
render(){
let {
id,
image
}
= this.props
return(
<div className='project-container'>
<h1>{id}</h1>
<img src={require(image)} />
<p>description</p>
<p>technologies used</p>
<img src={require('../images/git.png')} />
</div>
)
}
}
export default Project;
Your image prop shouldn't contain the path to image. But just the name of the image. Then you should read the image by doing something like
<img src={require('../images/'+image)}
Make sure the variable image just has the name of the actual image and not the path.
Two possibilities I can think of.
If you have created your React app using create-react-app, then there should be a folder called public.
You need to put all your static assets (images, videos, mp3) in there.
If you have started from scratch (or from a boilerplate) using webpack, you need to import it (e.g. import Git from './img/git.png') and configure the webpack to handle PNG or other types or image files.
Related
I'm a bit confused. In my web project, I'm using React and for iconography, I'm using the React Icons library.
The thing that confuses me is: Every time I want to use an icon, the IDE (in my case JetBrains WebStorm) suggests two available import locations.
Apparently, the icon exists in the parent all directory, but also in a specific directory with the same name the icon has.
import { FaStackOverflow } from "#react-icons/all"
import { FaStackOverflow } from "#react-icons/all-files/fa/FaStackOverflow"
Which one should I use?
Import icons from all, not from a subdirectory
The following hint is given in the docs:
NOTE: each Icon package has its own subfolder under react-icons you import from.
Also, after some experiments, I realized that using the icon from the all directory is the right one. I had issues when styling the icon (using a global class name provided in the <IconContext.Provider> parent element), so I changed the import location, and voilà, it worked!
Here is a demo. I'm using the following CSS to style the icon.
.icon {
outline: 1px solid hotpink;
}
This is the JSX code:
<IconContext.Provider value={{ className: 'icon' }}>
<FaStackOverflow />
</IconContext.Provider>
When importing the icon from the subdirectory, the styles are not applied correctly:
import { FaStackOverflow } from "#react-icons/all-files/fa/FaStackOverflow"
In contrast, this is the import from the correct location (directory all).
import { FaStackOverflow } from "react-icons/all"
I created one data file and I added Img name as one object.
[data.js]: https://i.stack.imgur.com/qG385.png
In fact, these images are also stored in the Image folder of my project.
But when I pass this data through Component as props, the image is not loading up -
[Props data]: https://i.stack.imgur.com/AHByK.png
[Props]: https://i.stack.imgur.com/66Jqk.png
Console also shows that the Img data is getting pulled correctly!
[Console]: https://i.stack.imgur.com/5Pkbt.png
If I manually enter img address under src the img gets pulled properly. Why I am not able to use it using props?
In React, image tags are a bit different. This isn’t really React’s fault, but more a problem of where the images will reside on the server after the app is built.
Two Ways to Include an Image in a React Component
With React, since there’s a build step, you need a way to include the image. There are 2 main ways to do that.
Option 1: import the image into the component
Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you’re using it.
Wherever you want to display the image, render your img tag and pass that variable as the src:
import katie from "../../Images/katie-zaferes.png";
function ImageExample () {
return <img src={katie} alt="Katie profile" />
}
Option 2: Put the image in the public directory
You can put the image file in the public folder (or if this is not Create React App… then any folder that will be copied to the server).
Then, assuming your server is treating the public folder as the “root” directory (/), then your images will be available relative to that – just like with plain HTML.
So if you had an image at public/images/wedding-photography.png, you could display that image this way:
function Home() {
return (
<div>
<img src="images/wedding-photography.png" alt="Wedding photography example"/>
</div>
);
}
I have an application in which I am using different views for mobile and desktop instead of going for responsive design. I am using server side rendering for my application.
Here is the code for browser starter file
import React from "react";
import App from "../shared/App";
import MobApp from "../shared/MobApp";
hydrate(<BrowserRouter>{__IS_MOBILE__ ? <MobApp /> : <App />}</BrowserRouter>
Here I render 'MobApp' component in case the site is loaded on mobile and 'App' in case the site is loaded on desktop.
Here is a dummy code for 'MobApp' component
import React,{ Component } from 'react';
import Header from './views/Mobile/layouts/Header';
import './MobApp.scss';
export class MobApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Header />
</div>
);
}
}
export default MobApp
As it is clear I am using import for loading component level CSS. Now 'Header' component inside this has it's own CSS import.
Problem -
If someone opens the site on desktop view, the code for 'MobApp' imports like MobApp.scss and all it's child components like 'Header' is also included. As a result I am able to get the CSS of mobile components on desktop.
What all approaches can I use to avoid this?
I have read about conditional imports and will try them out but would like to know if there is something better out there.
Also, let me know if I need to change the way I am adding CSS to my components or is there a more scalable way to do the same to avoid any future problems.
I have a very specific issue with Preact/React:
I have a .md file with some text, which uses react-router's <Link> tags inside for navigation. Like this:
## Heading
<Link to="/test">Let's go here</Link>
In my Component file, I render the Markdown and import the Link Component and pass the Link-components down, using the preact-markup component:
...
import {Link} from 'react-router-dom';
import text from './text.md';
import Markup from 'preact-markup';
export default class Comp extends Component {
render() {
return <Markup markup={text} components={{Link, HashLink}} />;
}
}
For importing the markdown, I use the #nuxtjs/markdown-it-loader, which works fine. It all works as expected, but doesn't feel clean.
I would like to be able to either import the Link components inside the markdown file, which would save me some boilerplate code for every view.
Or, even better, I would like to be able to write my markdown inside the Component itself, with the appropriate imports, and compile it all to HTML at build time.
I don't like runtime components since they need downloading and parse- and render time.
I am working on a react project. I am trying to add an image to one of my components. I made a directory named "images" in my project structure tree and I have put my image in this directory (image of project structure is attached below). I want to pass this image as src to my img tag. For this I right clicked on image and selected "copy image path" and then pasted that path to src of img tag. But when I try to run it, I get an error saying "Failed to load resource: the server responded with a status of 404 (Not Found)". Here is my code of component and screenshot of project structure.
P.S. I am on Ubuntu Environment
export default class CustomizedAppComponent extends Component {
render(){
return(
<div>
<img src="/home/user/Documents/Tessact-Master/dev/js/images/logo.png"/>
</div>
);
}
}
No Need to use ../ or require in your url.. SIMPLE TRICK: It is very important from where you are serving you app. If you are serving your app from Tessact-Master then you code should be like this below
use just /dev not ./dev
export default class CustomizedAppComponent extends Component {
render(){
return(
<div>
<img src={"/dev/js/images/logo.png"}/>
</div>
);
}
}
First of all the src of the image must be relative to the location of the component it is used in. Assuming the CustomizedAppComponent to be in the components or containers folder your image path must look like
"../images/logo.png"/
if the component is again inside another folder inside folder components, then give path as
"../../images/logo.png"/ // add '../' so on
Also in react you may need to mention the src within a require if you are using webpack to transpile your jsx and if not and then omit require in the below code.
export default class CustomizedAppComponent extends Component {
render(){
return(
<div>
<img src={require("../images/logo.png")}/>
</div>
);
}
}