I have many images and audios in my react project using create-react-app and thus Im using the public folder to use the images in my components. Yesterday night all the images where displayed correctly, and even displayed in github pages worked. But it just stopped working locally today. Ive tried updating packages, checking out in git to see if the problem were not there in previous commits, but none of that worked. Idk if it has something to do with npm packages or if you have encountered this problem before. Thank yoou
I just pushed to github the code and the images look good
and with the same code in localhost
The images are downloaded properly in localhost but it says type text/html instead of the extension of the image
Edit
It turns that the homepage attribute of the package.json changed the path of the localhost, although it rendered without that path, ant thus all the previous paths got messed up, use process.env.PUBLIC_URL to prevent this type of errors if using public folder
Related
o I am brand new to Github, and frankly to programming in general. I created my own portfolio website (following a Youtube guide) and have been facing so many issues trying to understand terminals and then getting it up on Github, but I must learn Github so it's worth learning it even though there are other options to post your websites onto. But after getting everything on my repositories, everything looks normal when I look at the code but when I open my website hosted on GitHub called tyler-104.GitHub.io (my portfolio website), all my images that are local to my computer won't display.
My images that aren't local are displaying ( I have one for github and one for LinkedIn) and work as they should. I thought that I simply only had to upload my local images that are also inside my HTML code to my repositories would solve it, but it does not.
If you look at my site
(tyler-104.github.io)
none of the bigger images are being displayed even after uploading my local files to my repository (https://github.com/Tyler-104/tyler-104.github.io). More than that I have tried and created multiple repositories, uploaded, altered, and updated but nothing seems to work. My only guess is that since they are local they won't display.
Do you need to somehow use images that are already stored online to make it work? Basically, would I have to remove my locally stored images (that are on my Desktop for example) in my HTML and use internet links that I want to display on some sites like Unsplash? Or can I use local images stored images and they will still be displayed?
The console of the developer mode is full of 404 for URLs like:
GET https://tyler-104.github.io/img/3D/Grapes.webp: 404
^^^^^ ?
But your repository does not have a img folder. It directly has 3D/Grapes.webp.
So might need to create img, and git mv 3D img/ in it (the commit and push), to test if those images are displayed.
This is my repo.
I'm getting this error code: GET https://phscloq.github.io/dist/img/r3.png 404. The image is in the contact tab.
I used Webpack as part of The Odin Project Restaurant Page task.
What do you reccomend? What should I try to fix this issue?
I've tried many things:
Img file originally wasn't subfile to anything. Moved it into the dist file. I thought because it's been deploy in different branch, it didn't see the img file.
I tried making the src /img/r3.png, /dist/img/r3.png
The image loads fine when I locally publish. I want it to load in the page. It's in the contact tab.
I'm making a Next.js app with a express server, this server was written on Javascript, but after some learning on Typescript, I decided to move that server to Typescript
When I started the app on development mode and went to localhost to check if the site was working, the page was blank, I thought it some front-end error, so I opened the browser console, nothing, so I decided to inspect element the page, and to my surprise, the CSS on the page had these properties.
So the page didn't showed any content, I removed that property, and the html showed, but without styles, so I went back to my IDE and deleted node_modules, re-installed everything but nothing has worked so far.
I did not change the server's code nor the page's code in any way, I just added types and interfaces for some custom types on the server
So I started to make some "debugging" on the page, and after some experimenting, I realised that the problem was that it couldn't import the scss from the files
(the "debugging")
So the problem that the files can't be imported, I tried renaming them, changing their extensions from scss to css, tried with new files, moved the front-end to typescript too, deleted package-lock.json, node_modules, but nothing has worked so far.
Any response will be appreciated, thanks.
I have been working on a Symfony application which is hosted on AWS. It seems that my image cache is not working properly. The system setup is using VichUploaderBundle, Assetic. I would like to mention I have this application working perfectly (no errors at all) locally on my MacBook.
The cache directory is in /var/www/myapp/shared/web/media/cache, this folder is 755 (same for its children), and the folder has the owners nginx:ec2-user. When an image is attempted to be loaded, eg. http://myapp.com/media/cache/resolve/login_logo/bundles/appfrontend/images/logos/linear-logo_small.png it does not load the image, nor does it create a directory in the cache to contain the image.
A similar issue is happening with the javascript for the application. Although it looks like the javascript is being loaded (the js is included on the webpages), it seems that most javascript features do not work on production only. Some examples of JS packages that are not working are Zenstruck and Swiftmailer. I am not sure if this is related to the other error we have.
There are a number of other issues also caused from javascript errors. The javascript is working perfectly on the version I have running on my MacBook.
Thanks for you help and suggestions in advance.
I'm trying to get the following example to work on my own webserver:
http://openlayers.org/en/master/examples/static-image.html
It works fine from the link, but if I checkout the OpenLayers3 git repository:
cd www
git clone https://github.com/openlayers/ol3.git
But if I then go to the examples in Firefox (Debian) I only see a gray back where the map should be. What do I need to do to get the examples working? I tried removing loader.js and referencing static-image.js directly. But that didn't work. I'm slightly at a loss.
Using directly Git repository with git clone https://github.com/openlayers/ol3.git is for advanced users or core developers (See https://github.com/openlayers/ol3/blob/master/CONTRIBUTING.md)
You should better make things simple for getting started.
Go to https://github.com/openlayers/ol3/releases
Click on the green button named "v3.0.0.zip"
unzip the downloaded file in a webserver
open the browser with an url similar to http://serverurl/path/to/examples/static-image.html
And it works.
PS: If you are really offline, download image from http://imgs.xkcd.com/comics/online_communities.png and change this same url in static-image.js file to the local downloaded file.