So Im building a Reactjs project (still learning) and I was wondering if its possible to define a constant that can then be used in other files to determine file locations. eg:
IMG_ROOT = /images/
I could then use this whenever importing an image. eg:
import IMG from IMG_ROOT + filename.jpg
Is this possible?
Related
I'm creating a game with sprays but I can't put all the sprays in the same folder because at least 50/ 100 and more are comming and I want to import all the images from a folder, the problem is that the name is variable.
Example :
import * as JhonImgs from "../images/Jhon/"
import * as JhonImgs from "../images/Lucas/"
Or something like that. All the images have the same extension, .png.
The problem is require.context() doesn't allow me use variables. And I can't call one by one, or use a cdn server.
Thanks.
I am using a relative path to display some images. I want to dynamically load a certain part of the path from my database (essentially a number like so:
'../../assets/img/pictograms/${this.state.pictoNumber}.svg'
Which works fine.
Now I want to insert that string as my src for an image component - I am using a custom one called FittedImage but hopefully that will not cause any issues - like so:
<FittedImage fit="auto" src={'../../assets/img/pictograms/${this.state.pictoNumber}.svg'} />
This however results in no image being displayed whereas this works:
import img from '../../assets/img/pictograms/1.svg'
**** .... ****
'../../assets/img/pictograms/${this.state.pictoNumber}.svg'
Can someone explain why and propose how to solve this?
Is it possible to have Webpack include image assets in the build bundle without:
Using an import statement for that specific resource (which can be done with Asset Modules in Webpack 5)
Not writing it into a static HTML document as an src attribute (which can be done with HtmlWebpackPlugin)
I would have some React JSX code that reference image resources, either as a src attribute in an <img> element, or have some resource string, say var imgUrl = './Assets/img.svg', and some element later using this string as an attribute.
Currently I could manually copy the entire /Assets folder into /dist, but I would have unused resources in /Assets and would like Webpack to figure out which ones are actually used.
Oh, now I understand, and unfortunately, this is not possible.
React won't detect the value of the src of the image because it will consider it just a string, and not a path. It won't figure out which file are you talking about. The only way to use it the way you want to do it is by having those images in the public folder, which you said you didn't want to do.
In my personal opinion what I usually do with static images if the app is small, is putting them all together in a file by importing them and exporting an object with all of them together. Finally every time I want to use any image I just import that file and use whichever image I want. With this approach, at the end of the day, I'll end up with just one file (bundle). It's just an approach, there are many different ways to do this but it's relative to the case
I don't know if I understood correctly, but maybe you could require the asset inline like this...
<img src={require('./Assets/img.svg')} />
If this is not what you are looking for, maybe you can explain me more in detail... I've quite a lot of experience playing with webpack, I think I may have a solution for you
I want to reference my img tag src to the outside of the app, for instance from a local hard disk is it possible?
in addition, in restful API how should reference img src to backend upload image folder.
If you reference an image outside of the app, you will be constrained to use full URL with domain (ex : https://google.com/your-path).
In the case of an API, you can either use the full URL, or you can pass only the relative path (/your-path) and add the domain (https://google.com) as a variable in your frontend file (for example by fetching it from environment vars).
On your hard drive you can simply use something like
<img src={"../path/pictures/image.jpg"} />
With an API, you need to get the data and an url from where your image is stored. Be it on the local hard drive of your server (which means you need to do something on your backend to serve the images) or a https:// url.
Once you fetch your data from the backend, you can simply reference it in the <img/> balise.
<img src={state.url} />
If you're using Create-react-app you could learn here
well , I solve problem . in fact i convert imag file to strng like this :
String filePath = HostingEnvironment.MapPath(#"~/Images/"); //read file from directory
var imageString = System.IO.File.ReadAllBytes(filePath + obj.foodImage); // read file as string
Transfer.Image = imageString; // and pass to byte variable
I am using React JS and Sass for frontend. Aim is to customize the pages i.e., to fetch the color values from database into scss files. I have a constants scss file which has all color variables with hex codes. I want to fetch these color values from the database. How can we achieve this?
_constants.scss
$background: #e6e6e6;
$accent: #abe2fb;
$accentDark: #4c83fa;
$accentHover: #77a1fd;
$backgroundDark: #999999;
$errorDark: #cc0000;
$errorLight: #ffe6e6;
You can't. At least not directly.
The _constants.scss is a static file which I assume isn't going to be updated on every request.
Why you store the color values in the db? Is it different by each individual user? If this is the case, I suggest you to create an API to fetch this and inject to React at runtime.
If you're just building an application that support different themes, then you're better of with generating 2 _constants.scss (e.g. darkmode.scss & lightmode.scss), and you just store the theme name in the db. In this case, you'd can just inject different stylesheet depending on the selected theme.