background-image: url('/images/img-2.jpg');
this is my code and it is still giving me a problem. the image is in public folder I also tried /img-2.jpg but it is still giving me an error. can anyone please answer this question.
Try something like this
background-image : url("../../../../public/images/urimagename.png);
for best practices use assets/images folder inside the src folder.
something like src/assets/images/allyour_Images.
Related
I have an import statement getting all images from a folder for each object in an array. It looks like this:
const gallery = import(../../assets/images/${project.folder}/*);
I keep getting errors saying cannot find module in './project.folder/*'. The file path is correct, and it's looping through each folder it needs to. But it seems the * isn't giving me all files in the folder as I thought it would.
Can someone explain this to me? How might I get all files from each folder this way? This seemed by far the driest method possible.
I'm trying to add some images form static folder in gatsby but somehow the path is always incorrect . Can anyone help me with defining the right path? I tried paths like this
../../static/1.jpg
this
../../1.jpg
and this
/1.jpg
Neither of them worked. It always display the same error
Can't resolve 'img1(or any other path)' in 'S:\Programowanie\Garni\src\pages'
The structure of the project look like this
The static folder recreates the exact same internal structure to the public one so:
<img src={'/1.jpg'} alt="Some alt text" />;
Should be a valid path for /static/1.jpg structure. And so on for the rest. Keep in mind that the key "static" should never be in the src of the image because it's "invisible" to Gatsby's public folder. All paths start from static as a root.
Keep in mind, as a downside, that using static assets will cause those images scapes the post-process and modification.
I'd strongly recommend cleaning the cache in each trial (static assets are hardly cached sometimes) by running gatsby clean.
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 have a file in my public folder of react project known as backgrund.jpg
I am trying to add it in styles.css of public folder to set it up as background image.
Here is the code for the same:
background-image:url("%PUBLIC_URL%/background.jpg");
The above code doesn't change anything however when I try:
background-image:url('https://i1.wp.com/sociallover.net/wp-content/uploads/2017/06/nature-images.png');
or
background-color: greenyellow;
both of them work perfectly. To give you a better picture, here's how the files are located:
Do let me know what exactly it is that I am doing wrong?
In the inspector I get this message:
GET http://localhost:3000/%PUBLIC_URL%/background.jpg 400 (Bad Request)
Additional things i did:
did a npm start after stopping the old server.
checked for the file name extension to ensure that my jpg matches with background.jpg.
Thanks to #Guy Incognito and #Ihor Vyspianky, I solved the problem by replacing:
background-image:url("%PUBLIC_URL%/background.jpg");
to
background-image:url("background.jpg");
This is maybe stupid question, but I am new and this problem took me a couple of hours :/. I am trying to import component like this:
import * as test from "../../../../common/containers/sidebar/Sidebar";
and file where I write this line is located in :
src/pages/example/containers/example.
above path of 'Sidebar' is correct but react gives me 'Sidebar' is not defined.
I found some kind of similar questions but it didn't help me so please if anyone has anny suggestions write below, huge thanks! and one more thing is this correct way to import files like this - I mean '../../../../' <- this looks like little weird for me.
You can add rootDir option to your jest config. And then just import components as from the global path.
For example if root is your src folder. Just import pages/example/containers/example