I have my Webfont downloaded: leaguegothic-condensed-regular-webfont
body{
background-color:silver;
color:white;
padding:20px 20px 20px 20px;
font-family:'League Gothic', "Condensed Regular";
}
It shows up in Google Chrome and Firefox however, it is using some sort of default fallback font when displaying in Safari. What can I do to resolve this?
I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there).
Now I am trying to reference this image via CSS (I only added the background-image line to a freshly generated CRA app):
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("../public/example.png");
}
You attempted to import example.png which falls outside of the project src/ directory
How do I reference the image file from within the CSS-file without copying somewhere inside /src? I also don't want to eject the application and get rid of the error message.
Edit: This question is different from The create-react-app imports restriction outside of src directory because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.
Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).
so for the question asked above:
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
background-image: url("/example.png");
}
the critical part being
/example.png
refers to a file, example.png, that is in the public folder (served at the root level)
Could also be relative:
one could also use
./example.png
provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)
In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,
background-image: url("/images/background.jpg");
references:
https://github.com/facebook/create-react-app/issues/829
https://create-react-app.dev/docs/using-the-public-folder/
there is a special page about the /public folder in the official documentation:
https://create-react-app.dev/docs/using-the-public-folder/
Here is how you should refer to the public folder:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
or
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
BUT, you can't use those solution in a css file. So you'll have to precise the ressource from the js files:
const MyComp = () => {
return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}
I was using "public" folder but it says here to use images inside "src" folder:
https://create-react-app.dev/docs/using-the-public-folder/
"Normally we recommend importing stylesheets, images, and fonts from
JavaScript."
Remove the extra .. in the relative path. :)
Use "./image.png".
The logic behind is that the css file you will place the code in, will be part of index.html when the app is finished, built and deployed.
The only way that helped me is adding full URL-adress to the image path. So this one can help:
background-image: url("http://localhost:3000/background.jpg");
Using the URL directly doesn't work for my environment, for me I needed to specify the path TO the image FROM the current directory.
eg;
/src/styles/style.css
cursor: url("../../public/images/image.png"), auto;
/src/public/images/image.png
background-image: url("http:/images/pexels-photo-1.jpg");
I am an error getting that looks like this in my Google chrome(56.0.2924.87) console while trying to use bootstrap glyphicons
Even though i have my .woff files and .ttf files located in my "public/css/fonts" folder.
Addtional Information
I am using Wampserver with apache(2.4.23)
I installed bootstrap.css with "npm install bootstrap"
This is what my font-face looks like
#font-face {
font-family: 'Glyphicons Halflings';
font-style: italic;
src: url('/public/css/fonts/glyphicons-halflings-regular.eot');
src: url('/public/css/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/public/css/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/public/css/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/public/css/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/public/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I try to call the glyphicons like this:
<i class="glyphicon glyphicon-chevron-left"></i>
Does anyone have any idea where this problem might be located?
Double check #font-face location path and also the mime type.
It’s become clear to me that I am a below average programmer and there is no such thing as a working example of an express/socket.io server on the internet. Why am I getting this error when I try to load the page?
GET http://localhost:3700/socket.io/socket.io.js 404 (Not Found)
I executed the following command inside of my working directory to install express and socket.io
Npm install
My package.json file looks like this
{
"name": "RealTimeWebChat",
"version": "0.0.0",
"description": "Real time web chat",
"dependencies": {
"socket.io": "latest",
"express": "latest",
"jade": "latest"
},
"author": "developer"
}
This created a “node_modules” directory, inside of which is a “socket.io” directory.
So why can’t my application find the socket.io.js file?
Other relevant information, I’m working off this tutorial. I’m following it word for word.
I have a .jade file that looks like this.
!!!
html
head
title= "Real time web chat"
script(src='/chat.js')
script(src='/socket.io/socket.io.js')
body
#content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
.controls
input.field(style='width:350px;')
input.send(type='button', value='send')
Admittedly, I have no idea what jade is, but I'm just trying to get a simple example up and running. I learn best as I do. Final project is due on Sunday! Help I need a server!
I've got an end-to-end working example of Express and Socket.io on GitHub at https://github.com/hectorcorrea/intro-to-nodejs
Try this:
git clone https://github.com/hectorcorrea/intro-to-nodejs.git
cd intro-to-nodejs
npm install
npm install socket.io
node socketioDemo
Then open two browser windows and browse to http://localhost:3000 and you should be able to exchange messages between the two.
I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.