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
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?
I am trying to implement Strapi on my react website. So i did some code and i didn't get an error but my screen is still white.
Index.js:image.js screenshot
Portfolio.jsx
Proftolio.jsx file screenshot
The only thing what i can found is in elemenemt inspect:element inspect screenshot
Does anyone know what is wrong in my code? I've got the content out of the playground.
Remove the "attributes" in your "map" and where you are using: {portfolio.title} should be {portfolio.attributes.title} thats what fixed mine untill I just broke it again trying for images...
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)
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.
I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.
One work around that seemed to solve the issue (temporarily) was to copy the pdf.worker.js file from the node-modules/build/pdfjs-dist/build folder and place it in the public folder of my react app. Then in my index.js file put the following code:
import {pdfjs} from 'react-pdf'
window.PDFJS.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.js'
This worked just fine for a week, until I installed a new module into my application with npm. Now, I'm getting the same error I did in the beginning, and nothing has changed:
index.js:14 Uncaught TypeError: Cannot set property 'workerSrc' of undefined
These were the initial comments that helped me narrow down the error:
https://github.com/facebook/create-react-app/issues/1574#issuecomment-280436498
https://github.com/wojtekmaj/react-pdf/issues/291
but now that it's back I'm kind of at a loss for ideas. Has anyone else experienced this and been able to solve it? Any help would be greatly appreciated!
Based on what I have seen in the docs and in forums, it appears you should be altering the global PDFJS object.
PDFJS.workerSrc, instead of window.workerSrc.
I managed to get this working by loading the worker from CDN.
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc=//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js