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>
);
}
}
Related
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 a React project that uses CSS Modules by importing .css files. e.g. import styles from "./styles/MyComponent.css";
I find myself now in a situation where a component is receiving a customized snippet of CSS as a string in response to a dynamic call to the server.
Is it possible to take this string (which is unknown until runtime) and essentially do the same thing to it that import does to the .css file when it is compiled by webpack?
For example:
import styles from "./styles/MyComponent.css";
//later on in component...
moreStyle = "a string containing valid CSS";
//do *something* here to moreStyle string to do whatever importing does to a file.
myJSX = (
<div className={styles.someClass}>
This div content is styled by someClass
</div>
<div className={moreStyle.someOtherClass}>
This div content needs to be styled by someOtherClass, but obviously this isn't working
</div>
);
You can try this:
import styles from "./styles/MyComponent.js";
myJSX = (
<div style={styles.someClass}>
This div content is styled by someClass
</div>
<div style={styles.someOtherClass}>
This div content needs to be styled by someOtherClass, but obviously this isn't working
</div>
);
Consider creating a serialized object, instead.
// Filename: MyComponentStyle.js
//Example styles
export const styles = {
someClass: { height: 10 },
someOtherClass: {
backgroundColor: 'red',
}
};
React doesn't work like your typical HTML/CSS/JS app. The thing to note that JSX may look like HTML but it is not HTML.
In your code, className is being defined as a string, which is expected, however, there's possibly no CSS being referred to in this document. Try to console.log it and see what you get.
...
Another possible solution is to simply have your style within the same component file. A common design choice for component styling is inline styling. This is especially useful for projects of medium-large scale, where managing files can get difficult.
Helpful references:
https://reactjs.org/docs/dom-elements.html#style
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
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.
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 using React.js to build a web app that displays a table with a bunch of protocols that it receives using a REST api. Id like to replace ONLY the table.
inside the body of the index.html page i have this:
<div id= "content"><>/div>
when my jsx script renders the app it takes over the content div.
Is it possible to do the same thing but replace one of the react classes using the id?
var tableChange = function(url) {
React.render(
<myTable source={url}/>, document.getElementById("myOldTable")
);
}
where the original react app contains this:
<myTable id="myOldTable" source={this.props.url} />
When I run the code the following way it says that its a null element and it cant be found.