guys I am fairly new to React Js, however I am working with a code that has been sent over and I need to edit for some images. So, I know the basics of changing, styling and just overall editting in React js, not that hard. But I am newbie when it comes to error messages or errors I can not see.
"dogs":{
"text": "This is text",
"src" : "img/dog.png"
}
Calling it in my app.js using:
let {text, src} = config.sections.information[title];
return (
<ImageSplit key={k} title={title} direction={dir} text={text} src={src} />)
So, as you can see in the code snippet above I use a .json file for the text and image. However, the images do not come up at all, and in the console i am getting the error message of:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have looked online for a solution with using WebPack, and it wants me to use require() however, I get the error of 'no module found of 'image name''
Solution:
Image file should be relative to the .json file not the app.js. Rookie move.
With trying my best to find out exactly what went wrong, I came across nothing within the console, apart from the error message mentioned above.
So, I found out the issue I was having was based up my git repo not being up to date, so the live version of the app was working fine with the images but the client side was not. Pulling also did nothing, so what I done is I reinstalled WebPack, reset my .json file and made sure the images were relative to the .json file and not to the app.js. Rookie move on my part. Thank you for everyone who replied and tried to help.
Related
I deployed my react app to gh-pages and my images arent loading anymore. They are held in the public folder and I am loading the them using the react-three-fiber hook useLoader according to their documentation like this:
const [theImage, 2ndImage] = useLoader(TextureLoader, [
"/{folderName}/{the-image}.jpeg",
".../etc",
])
Also Ive tried directing to the image using process.env.PUBLIC_URL + "/{folderName}/{the-image}.jpeg"
Gh-pages documentation says best practice is to load the image with the relative path and not the absolute path. But still my page cant seem to access them.
My Console error reads:
Uncaught Error: Could not load /{myrepo}{folderName}/{the-image}.jpeg: undefined)
at index-6f0019d1.esm.js:1670:1
Ive seen other post on this issue like this one but I dont quite understand the answer marked as correct. Can anyone explain?
So the changes made before having this issue are upgrading to webpack 5 and changing AWS EC2 instances. So I checked Nginx config and webpack config files and didn't notice anything wrong. If open a new browser tab and enter the CSS file link, I am able to get the CSS file but occasionally need to fetch the 2nd or 3rd time to get the file. When the website loads, the CSS file seems not be able to loaded at the same time. In the HTMLWebpackPlugin, I have set the scriptLoading as 'blocking'. Any idea how to debug and fix this issue? Another questions, only webpack generated js and CSS file has load issue, the other files like flexbox.min.css has no issue to load.
Update: I downgraded to using webpack4 and this issue is gone. If anyone has an idea or knows any configuration regarding this, please please let me know.
Thanks
I posted a similar question today but for some reason, I can't seem to get the paths right on React. I'm trying to import an image but I get this error Can't resolve '../assets/heroImage.jpg' in '/Users/joanaleitaooliveira/repos/web-project/src/components/Jumbrotron'
As you can see, the image "heroImage.jpg" is inside the file "assets" so I'm not sure why is this not working.
the path should be ../../assets/heroImage.jpg
I’m a little frustrated because it took a very long time to get file upload working. I’m working with vue on the frontend and using meteor for backend. The file-upload is done using Meteor-Files from VeliovGroup. The uploading works without issues and the files are getting stored in the .meteor-Directory (default Directory of Meteor-Files) while the app is running in dev mode. But now, how can I get the images or other files I uploaded? The path that is stored in the FileCollection for each file is not right, if I use it for example for the src-attribute of an image. Is there something I’m missing? Is it simply not possible at dev mode?
I tried to set different storagePaths in the Meteor-Files-Settings, tried the "path" and the "link" attribute of the Fileobject in the FileCollection.
<div class="" v-for="Image in getImages">
<img :src="Image.path" />
</div>
<!-- this is the Vue-Frontend where I'm trying to display the images, getImages is the FileCollection from Meteor-Files -->
I Just want to display or get my images, which I uploaded.
Thanks a lot in advance. If you need specific code snippets, just ask
Mario
Does the same thing happen when you just hardcode the src for 1 file? I've had quite a lot of trouble dynamically binding to an img tag in the past. So I wonder, if you just replace <img :src="Image.path" /> with <img src="yourhardcodedfilepath" />, does the image then get displayed, or is it still not displaying correctly?
Okay, I took the wrong absolute path for the config.storagePath. Now it works with the right absolute path. But I still can't access uploaded files in dev, that have been uploaded to the relative path in the temporary build-folder. But I think, I can do a workaround for that.
I am trying to display images that are in my public folder of my react app in the compnents and use require statements inside react-image tags as follows:
{profile.profile.picture && <Img src={require(`../../../public/profile-pictures/${profile.profile.picture}`)} alt=""/>}
I keep getting the above mentioned module not found error despite the image being present exactly where it should be. I tried a lot of solutions on SO but none of them seem to work for me. What could the error be?
Also I am new to React and am absolutely lost on what exactly is webpack and where do I even find this webpack.config.js file (if it exists for my app)