I'm developing an App using Ionic 2. Right now, I've this style:
ion-content {
background-image: url('/assets/images/orange-background.svg');
background-repeat: no-repeat;
background-size: 101%;
}
When I ionic serve this works fine, but when I upload a new version to Ionic View channel, this example doesn't work neither any example of background-image with an .svg.
I already tried Ionic - svg does not appear but didn't work.
Thanks in advance.
Edit 1
I already tried this url in background-image:
assets/images/orange-background.svg
/assets/images/orange-background.svg
../assets/images/orange-background.svg
./assets/images/orange-background.svg
None of this worked :'(
Edit 2
I just discovered that this problem only happens on iOS.
Maybe the url is incorrect. In the .css files: url ('../assets/images/orange-background.svg').
In other case, did you make the difference: In Whindows an image.SVG will works when you test the app in a browser but wont in Linux (Also Android). It seems that an image.SVG is the same as image.svg in windows.
I had a similar problem, and I realized that the file was called "Background.svg", and on my css I had:
background-image: url("../assets/imgs/background.svg");
Once I changed the file name to "background.svg" the problem was fixed.
Related
I'm in a .NET shop; Octopus and TeamCity are used for deploying to our testing and production environments. I added some .WOFF2 fonts to the /_css/fonts folder, and I'm referencing them as follows:
#font-face {
font-family: Roboto;
src: url(/_css/fonts/Roboto-Bold-webfont.eot);
src: url(/_css/fonts/Roboto-Bold-webfont.woff2) format('woff2'), url(/_css/fonts/roboto-bold-webfont.woff), <!-- other fallback fonts -->
The .WOFF2 fonts appear on localhost, but somehow they are being omitted from the build output. What's weird is there is a reference to a .WOFF2 of FontAwesome that is successfully being output. I've checked the properties of the fonts in Visual Studio, and all the new (non-outputting) fonts are set to Copy Always to output directory. Despite all our efforts, we keep getting 404 errors for those fonts.
TIA for any help you can provide!
You can add a MIME type inside the IIS Manager.
Open the "MIME types" in your server Home page (or Home page of your specific
Add ".woff2" with MIME type "font/woff2".
In my case it works with IIS 7.5.
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',m making some changes to the text in my react native application: I need to specify Roboto light for paragraphs and Roboto Bold for titles.
I need to have the same look of the text in both iOS and Android apps: so I need to make it work for both
I tried this code line of code
text : {
fontFamily: 'sans-serif-light'
},
but I get this error:
I tried this type from the official documentation and it's working fine
title : {
fontFamily: 'Cochin'
},
--> So I think the problem is in the Roboto font family itself. Any help?
To add custom fonts to your app store all your ttf files in a directory.
Add the following code to your package.json file.
"rnpm": {
"assets": [
"./fonts" // yours fonts directory
]
}
Then run react-native link
To use the font use the same name on the ttf file in fontFamily.
sans-serif-light and Roboto are Android-only fonts. You need different fonts for iOS. This repository has a list of fonts available for iOS and Android - https://github.com/react-native-training/react-native-fonts
You can use Platform.select() to target different fonts for each OS:
title: {
...Platform.select({
ios: { fontFamily: 'Arial', },
android: { fontFamily: 'Roboto' }
})
}
I recently had the same issue . It turns out that rnpm command is deprecated and you can add custom assets using react native cli configuration.
https://github.com/react-native-community/cli/blob/master/docs/configuration.md
To add fonts in the project:
Download the font and place it in the assets/fonts folder
Create a file in the project root directory as react-native.config.js
Add the following code
module.exports={
assets:[
"./assets/fonts"
]
}
Run react-native link
Run the project : npx react-native run-ios
Note: if build failed for IOS, open xocde workspace settings and change the build system to Legacy Build System.
Setup Roboto for both Android/iOS:
Usage
As Roboto is the default font family for Android. We can add Roboto to iOS and just use RRikesh solution omiting fontFamily for Android:
import {
Platform,
StyleSheet,
} from 'react-native'
const stylesByPlatform = Platform.select({
ios: { fontFamily: 'Roboto' },
android: { },
})
export default StyleSheet.create({
text: {
...stylesByPlatform,
color: '#000000',
},
})
Setup
For iOS we need to add Roboto fontFamily:
Download Roboto font from Google Fonts
Add it to your assets folder ./assets/fonts/Roboto
Add assets folder to your package.json:
{
...
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
Run: react-native link (it links ttf files on iOS and copy them on Android)
Remove Roboto files added in android/app/src/main/assets/fonts
Rebuild your app and 🎉.
I really don't know why this type of content is not in official docs. :(
If it can help, I had a similar issue. Using "react-native link" did indeed referenced the fonts in "Build Phases > Copy Bundle Resource", but it didn't add anything to the Info.plist file.
Adding the fonts in Info.plist solved the issue.
<key>UIAppFonts</key>
<array>
<string>Roboto-Black.ttf</string>
</array>
for react-native +v0.69, npx react-native link will produce an error. If you are using this version of react-native the solution is;
npm i react-native-asset or yarn add react-native-asset
create a react-native.config.js file in the root folder of your project.
Add the following to the file
module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };
create a assets/fonts folder at the root of your project.
then in the terminal, run npx react-native-asset.
That should solve your problem.
NB: As of rn-v0.69, react-native link has been discontinued and replaced with autolinking, but this feature doesn't work with adding custom fonts to your project so react-native-asset provides the same fixes as react-native link.
While I try to mix everything up, using Angular, bootstrap, and node.js / express I am stucked on middle of my way.
I created my component using this (good) tutorial :
https://trinitytuts.com/create-simple-web-application-with-angular-2/
I found out that I had to 'ng buid' on client side and push everything on the server, but while I try to load my component on the server side I just get : "Loading..." and nothing.
On developer console / network I can see the index.html is loaded from proper directory, but all sub elements are loaded from root (/) instead of 'trinity-app' directory
see : https://www.rdv.li/trinity-app/
Sorry if it sound as a verry newbie question, how could I 'force' the angular component to load it's subelements from it's directory instead of root ?
in express I added :
app.use(
'/trinity-app',
express.static(
path.join(__dirname,'trinity-app', 'dist')
)
);
every clue will be greatly appreciated
regards
greg
I found a workaroud, : ng build --base-href /trinity-app/dist
It's not a clean solution, but it works
I'm very new to Polymer. i read this official polymer documentation and downloaded a code sample and ran it using polyserve without modifying the code.I followed instructions given in polymer-project website. I installed every required components but after running polyserve command, it shows a page with 'Not found' text. Please help me.
I've installed npm 3.3.6,node v5.0.0.,gulp 3.9.0 and bower 1.7.7. All the commands are running fine without any error. I can't understand what exactly is going wrong.Am i missing something?
Polyserve output
Start server and try: http://localhost:8080/components/icon-toggle/demo/
Your folder structure should look like this:
[folder-path]/polymer-first-elements
README.md
bower.json
bower_components
demo -> contents: icon-toggle-demo.html & index.html
icon-toggle-finished
icon-toggle.html
Make sure the default port used by polyserve (3000) is not busy,you can use polyserve -p 8000 to try other port
You don't say what URL you are trying to access in the browser, but the sample code doesn't have any index.html file at its root, so accessing it there will fail.
There is an index.html in the demo directory, so you might have to add that to the url to access it.
I found I needed to add the following line to the <head> element of /demo/index.html:
<link rel="import" href="/bower_components/polymer/polymer.html">
Then view http://localhost:8080/demo (note the trailing "demo").