I know there are several options where to store and how to serve images in react.
two options are:
store the image in public folder and then use it like this:
<img src={process.env.PUBLIC_URL + '/someImage.jpg'} />
store the image somewhere else in the project, import it and use it like this:
import image from '../../assets/images/someImage.jpg'
<img src={image} />
I need now to create an img tag with srcSet with few images that the correct size will be shown according to screen width.
In order to avoid adding many lines of code (4 or 5 sizes for each image) for importing the images as I do today (I am using the second method as described above), I think maybe to move them to the public folder then I wont need to import many versions and also mention all those versions in the srcSet.
My question is
what will be the differences between serving images using the first vs the second methods I wrote above?
and which option will you work with?
in case you have many images and want to set srcSet with few versions to each image?
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've been trying to display an image using react from mongodb. I used multer to upload images and worked like a charm but my problem is, it seems that I cant output my image from the database. Heres my code.
<div className="img-preview">
{fields.dishImage ? (
<img
src={`localhost:5000/${menu.dishImage}`}
alt={menu.dishImage}
/>
) : (
<p className="image-text">
Image Preview <br /> Suggested Size 300x300
</p>
)}
</div>
The menu.dishImage contains something like this uploads/2020-07-15T09-13-56.569Zcovid palette.jpg
And I am getting an Error like this
GET localhost:5000/uploads/2020-07-15T09-13-56.569Zcovid palette.jpg net::ERR_UNKNOWN_URL_SCHEME
When I am opening that path from another tab I am seeing that the image is being shown.
Please add http:// in your url.
For example,
src={`http://localhost:5000/${menu.dishImage}`}
Ideally, You should use base_url from config so that you can use dynamic URLS.
Also, Use relative URLs instead of Static URLs
Actually you can try this alternative approach,
PS: You have to alter your code a bit for this method,
if you are working with big files greater than 16mb please go with gridfs and multer, else you can try this
( changing the images to a different format and save them to mongoDB)
If your files are actually less than 16 mb, please try using this Converter that changes the image of format jpeg / png to a format of saving to mongodb, and you can see this as an easy alternative for gridfs ,
The main goal is to convert the image to another format and then store them in mongoDB
i have put up a complete guide in this github repo, please to check them,
please check this github repo for more details..
According to the documentation (https://developer.garmin.com/connect-iq/programmers-guide/resource-compiler/) the resource compiler supports GIF as Bitmap. However, when I display a GIF file, I just get a still picture, and the GIF doesn't move.
The GIF I have been testing with is this: http://bestanimations.com/Animals/Mammals/Cats/cats/cute-kitty-animated-gif-2.gif
and I have saved the gif in the drawables folder (I use the ConnectIQ-plugin for Eclipse).
I have tried to include the Bitmap in the layouts resources as:
<layout id="MainLayout">
<bitmap id="MotivatorCat" x="center" y="center" filename="../drawables/motivatorcat.gif"/>
</layout>
and I have tried to include it in the drawables resources as:
<drawables>
<bitmap id="MotivatorCat" filename="motivatorcat.gif" />
</drawables>
and then loading it in initialize() by:
catgif = Ui.loadResource(Rez.Drawables.MotivatorCat);
and drawing it in onUpdate():
dc.drawBitmap(50, 50, catgif);
But nothing works.
What am I doing wrong?
The Connect IQ does not currently (as of SDK 2.1.x) support rendering of animated GIF images.