I have my images folder under public folder. I use it in jsx like this:
<img src="/images/twitter.png" alt="twitter" />
This works.
But I have a problem in CSS's url.
background-image: url(/images/twitter.png); // compiler can't resolve this file.
The above doesn't work now. How do I make this work? I am not using webpack and don't want to use it for now.
Where is your css file located?
Is it in the same folder since you are writing the route identical to your code?
Answer: Check the route of your img.png relative to your css file. It can be the only problem.
Related
I have seen the usual ways of loading images in react.
Use the public folder and then set the src normally
Import the image and then set it
import myimage from "../../assets/images/img.png";
<img src={image}/>
Require the image inline
<img src={require(`../../assets/images/img.png}`)} />
I'm looking to see if there is a way like in angular when you set the src for an image and the importing is handled automatically? I'm assuming ill have to playaround with HTMl-loader and file loader
I found this while I was looking for this https://stackoverflow.com/a/36242974/9802012
You can put your image in the public folder and then just do the usual html import <img src="./img.png" />
I want to load a local html file into an iframe element in React. I followed the accepted answer on this question, but it doesn't work.
The folder structure in my project is like below:
src
components
myIframeComponent.js
testHTMLFiles
index.html
Iframe element looks like this:
<iframe
src="../testHTMLFiles/index.html"
height="100%"
width="100%"
frameBorder="0"
/>
What am I missing?
The iframe src must contain an absolute url:
https://www.example.com/testHTMLFiles/index.html
This is because in your build the file is not avaliable at this position after build and iframe path is resolved as iframe is instanced.
Here we go again. Let's see if you can decipher the riddle :D. So, the problem is the following. I have an external css file. I putted some 'specs' inside this file. I downloaded a plugin that make possible to link external css files into js files. So, in that way I can 'stylize' the JSX syntax inside that files. Everything ran great, but a problem appeared. If I declare a 'className' inside an element and I try to manipulate the properties of this element, nothing happens. But if I "call" the element by name( example: div {...} or footer{...} ) into the css file , the manipulation happens.
This is the code inside the JSX syntax:
<div className = "userlog_wrapper">.....</div>
..and this is the code inside the css file:
.userlog_wrapper{
width: 100%;
height: 660px;
}
Ok, I fixed it. The solution is the following......if you are using the nextjs plugin for css click on me .You need to write this inside the js file:
import css from ../wherever/the/file/are
and then, next to the className put this '= {css.nameOftheClass}'.
That's all, it should work.
#font-face seems quote straightforward to setup in my CSS, and yet, my defined font is not being used. This is in a CakePHP 2.2 webapp, and despite trying all sorts of CSS URL path combinations, external CSS -v- inline CSS and single quotes/no quotes/double quotes in the CSS; nothing's working.
Here's the CSS:
<style>
#font-face {
font-family:TerminatorTwo;
src: url(../files/TerminatorTwo.ttf) format('truetype');
}
div {font-family: TerminatorTwo}
</style>
My app has the default CakePHP folder structure, so the CSS is in app/webroot/css and the font (just the .ttf) is in app/webroot/files
Instead of the div part in the CSS, I've tried inline style definition on a specific div. Didn't work. the code as seen doesn't work, and it doesn't work wherever I try adding quotes in the CSS, as I've seen in other examples elsewhere. All this has been trie din the latest versions of IE8 (yes, 8, yuck), Firefox and Chrome. Oh, and Chrome for Android.
I've messesd around with the path too, but to no avail.
Utterly frustrated. It's inherently so simple!
The font file is probably not loaded due to an invalid path. It's better to use the HtmlHelper for in these cases, as relative paths are bound to get messed up in a Cake install. Use the url() method to point to the files directory.
#font-face {
font-family:TerminatorTwo;
src: url(<?php echo $this->Html->url('/files/TerminatorTwo.ttf'); ?>) format('truetype');
}
Cake will make sure the URL points to the files directory in /app/webroot at all times.
Alternatively you could ditch the inline CSS and use an external stylesheet to avoid the issue with correct paths in Cake. In that case, if the CSS file is in the app/webroot/css directory, you could use the ../files/TerminatorTwo.ttf notation.
im using themes in an app im doing, and need a global css/img/js folder
i have tried using app/webroot as this folder, but cant get any css from a theme to show the images.
I have a setup like :: /app/views/themed/my_theme/webroot/css/file.css
With some css that looks like:
...
body{
background-image: url('../img/file.jpg');
}
...
if i have the image in /app/views/themed/my_theme/webroot/img/file.jpg everything works 100% but when i put the image in /app/webroot/img/file.jpg it will not show. i have tried all sorts of combinations for the
i have also tried using a plugin dir like app/plugins/my_plugin/webroot/img/file.jpg but the various paths ive tried will not show the image either.
any ideas how i can get the image to show? i dont mind if its for webroot/ or in plugins/xyz/, just as long as i can use the same image in many different themes with out having to duplicate the images
when the image is in /webroot/img i can use the full path like url(http://locahost/my_app/img/file.jpg) and it works.
things that dont work
url("img/file.jpg")
url("/img/file.jpg")
url("../img/file.jpg")
url("/../img/file.jpg")
url("../../img/file.jpg")
thanks.
In your CSS file
body{
background-image: url('/img/file.jpg');
}
This will use the root area to find the image in /app/webroot/img/file.jpg
CSS has urls for images relative to the path it is placed in.
CSS files from my_theme are linked like site.com/theme/my_theme/css/style.css in the browser. So if you want to use an image from app/webroot/img in your theme's CSS, use url(../../../img/image.png)
I have not tried that but the cookbook says:
If you want to keep your theme assets
inside app/webroot it is recommended
that you rename app/webroot/themed to
app/webroot/theme.