I have this CSS code for image of a div:
#side_login {
background-image: url("./images/side.png");
}
It is relative to the src folder, and it works.
My problem is that after build the image file name changes to something like side.3acb161b.png, and for business reasons I prefer to keep it the same (client wants to change the image on the server manually).
Is there a way to do it?
Related
In React: I couldn't get a background image to load from my CSS file. Upon researching it, I learned that I should have my images folder in my src folder and not my public folder. So I moved my images folder. My background image from my CSS file now works, but React isn't finding any of my other images, which is was before.
I have code such as:
setImage(`./images/${temp.img_bg}`);
and
<img src="/images/logo.png" alt="Logo" />
I've tried different things with the path, but to no avail.
The problem probably because the path is not good i'd like to recommend you this way of importing images.
import tmpImage from "./exmpleImage.png";
and then you use the img like this
<img src={tmpImage} alt="Logo">
Another recommended tip is to put all you're images in a specific hierarchy something like
src -> assets -> images
and most of the times you should import the images like this
import tmpImage from "../../assets/images/exmpleImage.png";
every "../" will get you one folder backward in the path.
I have an app that I created using create-react-app and I want to set the background image of the header element. I tried using external CSS in Home.css and imported it from Home.js with this code:
header{
background-image: url(./images/bg-hero-mobile.svg);
}
The above approach is showing me this error:
./src/Home.css
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/Home.css)
Error: Can't resolve '/images/bg-hero-mobile.svg' in
'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'
Here is my file structure:
Error: Can't resolve '/images/bg-hero-mobile.svg' in 'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'
it's a path issue. The webpack was not able the find the file on the given path i.e the file does not exist on the provided path.
To give the path as per the current app structure
header{
background-image: url(../public/images/bg-hero-mobile.svg);
}
Or you can simple put the images folder under src directory.
Since the new release of create-react-app v4.0.1 it is not acceptable to access images through a css file but you can access it from jsx and inline css. If you want to access a resource like images,fonts you have to put them in src folder. In this case I have to move images folder into src folder and use this code to access it:
header{
background-image: url(./images/bg-hero-mobile.svg);
}
A quick note: Since I do not have enough reputations, I cannot create new relevant tags related to ORY Editor. I'm not sure whether this question will reach the right people.
While using react-page currently, we can get a HTML string output by using:
ReactDOMServer.renderToString(
<HTMLRenderer state={editorValue} plugins={plugins} />
)
However, this exports the HTML tags with pre-defined "class" names, which are then styled using the CSS files imported in the code.
I'm trying to implement something, where I use react-page/ORY on a web-page. Export the HTML, and render this is a mobile app, using react-native. CSS files cannot used in mobile app development.
Now there is no easy solution to when it comes to CSS files of react-page/ORY, because all the CSS files are distributed all along the node-modules in separate folders.
I even tried:
- putting a bunch of these CSS files in a single folder,
- creating a .html file, and importing these CSS files in that .html file,
- opening this .html file now on browser clearly shows CSS files weren't applied, maybe because of distributed nature of CSS files.
So, any ideas on getting inline-styled HTML as export from react-page/ORY?
I'm making a custom React dropdown component and am trying to use custom SVGs as background images based on the selected value. Locally, they are rendered perfectly but when building a sandbox to test my branch I get 405 errors.
Initially, my images were in /public but even when moving to /src... I am still getting 405s.
Both relative + absolute paths do not work.
background-image: url('../images/lock.svg');
background-image: url('/images/lock.svg');
In my Extjs app I have kept custom.css file in the resources folder of the root for testing and in the build- resources folder. And add the css path to two both index.html files(test and build). But whenever I make it to convert to build production, index.html file overwrites and custom.css file finds missing. Somewhat problematic it is. I know that this is because I add this file externally. But Is there any permanent solutions to fix this, without violating the Extjs app structure ??
You can add your custom styles via scss. There are several articles around the web about styling your ExtJS app.
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
http://www.rallydev.com/community/engineering/guide-custom-themes-extjs-4 [dead link]
If you only want to add your single custom css file - which i do not recommend - you can do things like that:
Include an existing CSS file in custom extjs theme
http://www.sencha.com/forum/showthread.php?270694-How-to-include-custom-components-CSS-in-build-CSS