Images not displayed using localhost, after pushing code to github - reactjs

Live Site
Repo
I just uploaded this project and the live site works fine. But for some reason the images are now gone when viewing it on localhost. It worked fine until I pushed and published the project.
The images folder is inside the public folder.
Also I just realized that when viewing the site on mobile, I seem to be able to scroll beyond the content (right and down). I’m not sure why that is..I also noticed that when viewing the site in the browser and enable touch simulation. Disabling it, it doesn't scroll beyond the content.

you have specified the file location as "./images/client-databiz.svg" for images
which is need to open the folder named images under the current JS file presents.
since during deploying it will build and make your code into static file
refer
you need to use "../../public/images/client-databiz.svg" to preview that actually.
I hope it will also work in production.

Related

react-app from subdirectory does not get loaded

I'm working for educational purpose on create a react app and serve it in a subdirectory of an existing domain which already hosts a web application.
Just to try to be more clear I have this situation:
www.mydomain.com (this is a web application currently online)
Now I need to put this new web app under
www.mydomain.com/test
To try to make it work I have my wwwroot folder with my brand new subfolder wwwroot/test.
Now the problem is that if I just put (in wwwroot/test) a simple html file with nothing more than just an <h1> tag, I can open the URL and see the content in it.
If I put my react-app (which work fine in my develop environment) I just see an empty page and if I open the inspector I see that some of the necessary resources aren't reachable because their requests point to root domain (www.mydomain.com/css/ionicons.min.css instead of www.mydomain.com/test/css/ionicons.min.css).
This is my very first time with IIS and I'm trying to get it work by myself, but it seems that I'm unable to find a proper solution to my problem...
Hopefully I was clear enough!
thanks in advance to all who will spent some time reading about this!
I've already made some research and all of them seems to point to some kind of redirect/rewrite rule to write in the web.config of my subdirectory app and/or in the web.config of the root app.
I've also tried to put "homepage": ".", in the package.json which solved the problem of the resources not getting loaded from the proper path but the page is still blank.

Local overrides for react app in production not working on reloads

I am trying to debug a react app in production and I recently came to know about Local overrides in chrome developer tool. So I naturally gravitated to use to it. I find the file in sources I make changes to it and save it to my local overrides directory. It gets saved and I enable local overrides. But on page reload the browser is not loading the file from local overrides folder I created but the original file from server. I tried out almost every option I could find by googling but nothing has worked. Could someone please help.

Why can't I view these images in my cpanel?(not a caching issue)

So Im fixing the gallery page on this website https://gilbertmovingandstorage.com/gallery.html as you can see certain images aren't loading? I uploaded them in the img folder on the cpanel. I can see them right next to those images that are visible in the gallery? The img src has no typos and its not a caching issue because I can't see these images in incognito either? Please someone help me I'm sick of all these issues! This project is taking me too long
here's proof that the images are in the folder https://imgur.com/a/dkfqYq5
and here's a pic of two images and there src url. One can be viewed on the site and the other one can't? Even though there's no typo https://imgur.com/a/GmdPP0z
Also looking at the source in the devtools then opening the img folder then the gallery_img folder I don't see the images there? I only see the ones that are visible on the site? So does that mean iit is a caching issue, and if it is why then can't I see it in incognito or when I clear the cache??
I just loaded the URL and all the images loaded correctly for me.

Preview Pane Not Displaying Correct Formatting

I am using C1 3 and am having problems with the preview pane.
The C1 site uses master pages for templates, and works correctly when published. However, it is not displaying correctly in the preview pane. It visually appears to be ignoring CSS settings.
This site was copied from an original install, on another sever, that works correctly.
Any tips and or ideas would be greatly appreciated.
*UPDATE**
In the content view, which is not working, it is using this url
http://www.abc.com/Composite/content/Frontend/Images/logo.gif
All other sites, including the published version of the site above use this url
http://cms.abc.dev/Frontend/Images/logo.gif
I am assuming the same is happening for all images and style sheet references.
However, I cannot find where this is happening. In the master page items are referenced as follows:
href="~/Frontend/Styles/layout.css"
ImageUrl="~/Frontend/Images/logo.gif"
Thats weird... have you somehow accidently configured the /Composite/Content folder as an application? Thats almost the only explanation why asp.net would expand ~ to /Composite/content/ instead of just /.
The preview-tab is handled through a wrapper-page that lives inside /Composite/content, unlike normal viewing of published pages which is handles by the root itself.
I think i found the problem...
I created a new app pool, used it, and now it works.
I guess the app pool somehow got corrupted...

Problem publishing images in Silverlight PivotViewer

I'm working on a Silverlight PivotViewer app and using the Excel Pivot Collection tool to generate my image files. Everything works perfectly except some images are not being published by the tool. As a result, when the app launches, everything looks great except there are blank spaces where the unpublished images are supposed to be. All of their data/facets are available if I click on a "blank" image.
When I dig a little deeper and look at the files that are generated, the missing images are not there. What's more interesting, if I look a the cxml file. The images information is all there only the missing images are missing their "img" attribute. For some reason, the Pivot Collection tool recognizes that there are images but chooses not to publish them. I've tried re-creating the images as both PNGs and JPGs to no success.
Does anyone know why this is happening and how I can fix it?
Delete the entire collection_files folder and the cxml file. Republish the images and then add the newly published collection_files folder and cxml file to your project.

Resources