I'm new to react, I'm trying to display images from the src/images folder.
but after inserting the correct path, then also the image is not visible.
Here you can see my img tag path and on the left side folder structure
From the Image you provided, looks like you used require("path...") which is not a good way to do so, its valid tho, but not a good practice, its recommended and is common to use import X from "somewhere" syntax.
I suggest you to use either of these two ways to use images in react.
put images in public folder and use relative links in the href tag, i.e:
<img href="/images/panda.png" alt="cute panda" />
put images inside a folder somewhere inside src folder like you did in the image and import images using ES import syntax, and use imported image variable in {} expression for src prop, i.e:
import PandaImg from "../images/panda.png"
const Panda = ()=>{
return <img src={PandaImg} alt="cute panda" />
}
Here is a CodeSandbox Example may help you further explore the code in broader context.
Related
We have hundreds of SVG files that I am trying to render inline. I am using create-react-app which already has #svgr/webpack installed and configured. It allows me to add SVG inline like so:
import { ReactComponent as SvgImage } from '../Plans/Brownlow-Floor-Plan.svg';
...
<SvgImage style={{ width: "600px !important" }} />
Similar question provides a solution for dynamically rendering SVG inline. However, In my case, I don't have any SVG files in the source code. Instead, all SVG files are returned to me via a call to an API service. For example:
http://myservice/api/getplan(100)
http://myservice/api/getplan(103)
http://myservice/api/getplan(106)
http://myservice/api/getplan(631)
As a result, by the time webpack is run, it has no information about these SVG files.
So my question is: is it possible to render svg dynamically in react (TypeScript) if I pull SVG file from an external URL?
This is not a duplicate question:
How to dynamically import SVG and render it inline
Approach described in the question above is not going to work because it expects all SVG files to be added to the source code.
This approach also not going to work because simply using an img tag will not pull SVG inline:
<img src="plan.svg" />
Including SVG via an img tag make these kinds of things impossible:
Any help will be greatly appreciated!
There's an excellent package called react-svg that does exactly what you want.
You can use it with a simple src property that takes a url string, just like an <img> tag. But behind the scenes, it will download the svg file from the url and inject it inline. For example:
import { ReactSVG } from 'react-svg'
Component = () => <ReactSVG src="http://somewhere.com/my.svg" />,
I am not sure if this will work for you but, you can try to using the tag <use /> within an <svg /> tag. For example:
<svg
height={iconHeight}
viewBox={`0 0 ${iconWidth} ${iconHeight}`}
width={iconWidth}
>
<use xlinkHref={`${svgPath}#${icon}`} />
</svg>
Where svgPath is the URL to the SVG, and icon is an ID set on the SVG. You can try to omit to the #${icon} portion.
Not sure if this helps though.
If you choose this route, you may be incompatible with IE... For that you can use svg4everybody, but tbh IE is dead and it should stay dead.
Cheers!
I have a lot of images I need to use in my react app, so I don't want to import them one by one. To that end, I'm using reqiure(). However, while require works when used like this below:
return <img src={require("./images/lets_go.png")} />
if I store that path in a variable:
let v = "./images/lets_go.png";
return <img src={require(v)} />
I get Error: Cannot find module './images/lets_go.png'
Why won't it allow me to use the path stored in a variable (it's the exact same path) and how can I make it work?
this will work using a 'Partial' require, where you give the path as text and and the image name can be the varible. the reason this is happening is related to how webpack is meant to handle static paths.
What we know works, (static image path):
<img src={require("./images/lets_go.png")} />
Trying to make the path a varible like this we found does not work
let v = "./images/lets_go.png";
<img src={require(v)} />
What will work when trying to make the path a varible
let v = "lets_go.png";
<img src={require(`./images/${v}`).default} />
Note that .default needs to be added at the end of the require as of may/2021 due to a error related to react scripts. this might be fixed and not needed if you're reading this in the future.
you'll need to store all your images in the same folder of course, but this lets you dynamically load high volumes ofimages in react/js without needing to manually import them all into the code.
Either you may import the image and bind it to src attribute like its done in create-react-app with the logo as follows:
import logo from './logo.png' // relative path to image
class Home extends Component {
render() {
return (
<img src={logo} alt={"logo"}/>
)
}
}
Or, if you used create-react-app cli to create your project then your public folder is accessible. Just create the images or assets folder in public and you may access it in jsx as follows:
public/images/ -> store images here
<img src="/images/home.png" /> -> use it like this in jsx
I'm currently working on a project with React JS, that contains lots of assets. And actually, I'm wondering what is the best way to import assets between these two methods :
- Creating a JSON file that contains all informations, with their assets paths (eg. mySuperImg: "../assets/img/myImage.jpg" then using the path for my image tags)
- Importing all assets directly in the component (or using the Context API, perhaps?) (eg. import {myImage} from "../assets/myImage.jpg" then using the img tag with that path <img src={myImage} alt="My Image"/>)
My questions : What the best way to import assets ? Is there a speed difference between these two methods ?
Thanks! Take care!
I'd say it depends on you. Whichever way you feel comfortable, you should go for it. Generally, I import the assets in the corresponding file, but the other way can also be used. Instead of json, you could use js approach as well, similar to how we export actions, for eg,
export const ADD_PROJECT = "add_project";
export const FETCH_PROJECTS = "fetch_projects";
You could use something like,
export const IMAGE = require("the location to your image");
To answer if it would take more time, I don't think that there would be any performance issue, as we use a similar approach for the actions most of the times.
it's best to keep the images in assets and use them in your source, if you work with the JSON file then you have to keep track of both of them and it will mess up as you say you have a lot of assets.
I have a requirement to select, from a local source, an image based on the value passed back from the REST API I am using. For example:
//Psuedo-call from the API
var imageIdToSelect = response.data.imageId
//Then later in the render()
<img src={ baseUrl + imageIdToSelect } />
I have a solution to this, which is to use require() as that allows me to append the url as such:
<img src={ require(baseUrl + imageIdToSelect) } />
This works fine, however, I am using a Microsoft TSLINT setup that does not allow require() over the prefered import at the top of the file "no-require-imports".
I know I am not meant to let linting tools control my work to the point where I am just blindly following rules. So my question is two-fold:
Why is it frowned upon to use require() in such a way. One reason I could think of is that if all of the external files/resources are declared at the top of the file, then you don't have to look through the source to find them hidden in functions.
What would the import x from './' solution look like here? I have seen people creating index.js and index.d.ts files inside their image folders to import and export all the images inside but that seems a tad extraneous.
Edit: I also have just realised that using require() with a non-literal string is a violation of my ts-linting too.
Thanks in advance
to learn React I created a REST API to grab data from and after some issues I got it working with fetching data in my state, and rendering the component with data depending on state.
now, i'm trying to use this.state.data.Image, which is a simple string like example.jpg, to show different images which I have stored locally in my project. the pictures are stored in the src directory while I have my components in a component directory, so to grab the picture I have to use ../example.jpg. if i do this grab with an import, like this:
import example from '../example.jpg';
<img src={example} alt=""></img>
it all works well, but this doesn't work if i want to show the image depending on which set of data i'm grabbing from the API. so I'm trying something like this:
<img src={require("../" + this.state.data.Image)} alt=""></img>
./src/App.test.js
Module not found: Can't resolve './App' in 'C:\Users\MyName\Code\react-test\src'
For boilerplate I use create-react-app, which is why this App.test.js file is generated. Why is this issue arising? Am I missing a key point? Any pointers appreciated!
You cannot write src={require("../" + this.state.data.Image)} in jsx files.You have to import all image files as
import example1 from '../example1.jpg';
import example2 from '../example1.jpg';
<img src={example1} alt=""></img>
based on this.state.data.Image you can import images
You can create a map as
imageMap = ["img1":{example1},
"img2":{example2}
]
and write
const inputImg = this.state.data.Image
<img src={imgMap[inputImg]} alt=""></img>