Hello I have a react app and I set the "homepage": "./" in package.json, this works for me when my application loads from the sub-directory. All the Js and CSS files get relative paths in their href attributes.
Landing page URL: https//:<my-domain>/<sub-directory-path>
The problem comes when I click on a link from my landing page it opens the new tab in a browser and the browser tries to load the page but it fails and throws the following error:
Refused to apply style from 'https:<my-domain>/<sub-directory-path>/somepage/static/css/8.28838c0e.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When I checked in the elements tab of the browser the CSS links are loaded as followed and which is the same in my landing page
<link href="./static/css/8.28838c0e.chunk.css" rel="stylesheet">
I think because the new tab opened and URL has changed the CSS is trying to load from relative path and that's why the error is coming.
Any idea how to fix this? OR I should not open a new tab when there is relative path set for the homepage key in package.json file?
Try specifying the type of the css file type="text/css"
and removing the dot from the css link path href="static/css/8.28838c0e.chunk.css"
The html line should look like this:
<link rel="stylesheet" type="text/css" href="static/css/8.28838c0e.chunk.css"/>
Related
I have a SvelteKit app that is not reading a Javascript file. The app references a CSS file and a Javascript file in the static ("public") folder, from a layout file. The files are referenced in a <svelte:head> tag in the layout file as follows:
<svelte:head>
<script src="/js/script.js" on:load={() => console.log('script:initialize')}></script>
<link rel="stylesheet" href="/css/style.css" />
</svelte:head>
The CSS file is working as expected. The Javascript file referenced by the script tag works on initial page load, but not after a page refresh. The server must be restarted for the js file to be read. The js file is present in the browser (the code can be viewed using the browser's dev tools), but the code only works if there's no page reload, and likewise the console.log above only works on initial page load, not on reload.
Versions of SvelteKit are from 1.0.0-next.345 to 1.0.0-next.420.
The file does not work when placed in app.html.
It starts with
document.addEventListener("DOMContentLoaded", () => { ...
If I add a js file to the static folder with the content console.log('hello') and add <script src="/js/hello.js" on:load={() => console.log('script:initialize:hello')}></script> to the <svelte:head> tag, the browser logs "hello", and not "script:initialize:hello".
I've been developing an embeddable widget using CreateReactApp. It works great when initialised from the index.html
Now I want to test what happens when the user changes page in the html. Ill need to save the app's state in storage etc.
When I add a second html page to the public folder (two.html) and navigate to it - I get the error:
URI Error: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
..and the app js does not run.
How can update my app so I can use a second html page?
The issue maybe caused due to babel not able to transpile the % .
Please try updating this in index.html :
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
to this:
<link rel="icon" href="/public/favicon.ico" />
I created the build file for my React JS project. As soon the build index.html file in browser, everything worked fine, except for a single image that I have provided in my Topbar Component. The image appears broken, even after it is present in my application folder.
Here is the screenshot of broken image:
and this is how the image element looks in inspect tool:
Can anyone please suggest the reason for this?
We have to Create image file with in the public folder then access the image file in href
<link rel="icon" type="image/png" sizes="32x32" href="/img.png"> here img.png is the image file name and see the folder structure is like
project
public -- >index.html
public -- > img.png
src
package.json
It is default setup in create-react-app application that I am using. But the favicon is not displayed. Not even the react favicon that comes with create-react-app. I can see the favicon link in the chrome's inspect tab. Also the icon gets loaded in localhost too for the link "http://localhost:3000/favicon.ico"
Following link is present in the index.html as well
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
What am I doing wrong for it to not be displayed ?
That issues happened for me too , what i did was i just went to this site .. from there i created my .ico image and gave my absolute path of that .ico image .
Ex :
<link rel="shortcut icon" href="/images/myfavicon.ico">
I used Yeoman to create a web app in AngularJS. Everything works ok, but after using the grunt build command, if I view the built app in the browser (from dist directory), I can see that some yeoman image on the broswer, how i can remove it?
Delete Chrome's favicon cache file.
On the Mac, it's at
/Users/[yourname]/Library/Application\ Support/Google/Chrome/Default/Favicons
Look for a line that looks like this in your index.html in your public folder.
<link rel="icon" type="image/ico" href="../img/favicon.ico">
and change the href to wherever your image is, or to remove it just delete that line.
You only have to do this steps:
Delete the file called favicon.ico (it's in the dir called "app")
If you have the image you want to use as a favicon, go to this link
Click on "create a favicon" and upload your image.
This page will generate your favicon in a file named "favicon" and you have to save it in the same place where you deleted the file favicon of yeoman.