I have an issue with my react-application when I build it with electron-builder.
I just want to show an application logo with either dark or light font-colour depending on the currently selected theme. For that, I created 2 separate SVG's (dark and light).
The problem
If I start the react-app with react-scripts and electron ., my SVG Icon gets rendered (everything works as expected).
If I create a full electron build of the react-app and afterwards start the build, the icon only appears for the first render.
If the screen gets rerendered, the SVG image is not visible.
I also looked into the dev-inspector of electron and the src property for the image is exactly the same as for the first render.
The imports of my 2 logos:
import LightLogo from "./images/lightLogo.svg"
import DarkLogo from "./images/darkLogo.svg"
The img component:
<img
className={styles.logo}
src={props.theme === Themes.DARK.name ? LightLogo : DarkLogo}
width={"40%"}
alt={"Logo"}
/>
The tag in the compiled app:
<img class="jss742" src="./static/media/darkLogo.667e0ffc.svg" width="40%" alt="Logo">
Logo not working after second render
Unpackaged app.asar
This is my first question, so if you need any further information, feel free to ask.
Thanks
I was able to fix this by adding <base href="./" /> to my index.html file.
Related
I'm currently working on a project, a social media type website where people can create posts and add an image to it. So far this is working, the post is created and the image is being saved locally to a folder. The issue I'm having in the home.js file is that the image is not showing on page render, instead it is showing an image icon with the alt text and telling me in the console:
GET http://localhost:3001/images/1664455878582selfie.png 404 (Not Found)
I am not yet getting the link from the SQL database but adding it manually to the code to first check that it will show.
This is the code on the home.js file:
const image = 'http://localhost:3001/images/1664455878582selfie.png';
And the return function:
return (
<div className='home'>
<div className='post'>
<img src={image} alt="postphoto"/>
</div>
</div>
)
The images are stored in project/server/images and the server is hosted on port 3001.
The code is available on https://github.com/ohsand/groupomania2 if this helps!
Thanks in advance!
The direct variable image link doesn't work in React. You should import the image first and then use it. Given below the demo code, you need to modify based on your project.
import image from './images/1664455878582selfie.png';
<div className='post'>
<img src={image} alt="postphoto"/>
</div>
'./images/1664455878582selfie.png' section will be according to your File-Structure.
I'm trying to add some SVG images to my project. I have the downloaded images and have tried dropping them into my file system in MP3 format and SVG format, but this is not working. I'm wondering how I can add these downloaded files into my project.
I've tried everything I've found on Google, but it does not seem to be working.
Use
import { ReactComponent as MySvgFile } from './mySvgFile.svg';
And then render it like this:
<div>
<MySvgFile />
</div>
Hi does anyone know why my png file is not displaying, even if i set it outside of the button element, it does not work.
I have used a JPG and it works but PNG is not, is there any obvious reason why PNG would not be showing up.
Here is an image of my code
Image of code here
First of all wrap the src in {}
Then if using Webpack; Instead of: <img src={"./logo.jpeg"} />
You may need to use require:
<img src={require('./logo.jpeg')} />
Another option would be to first import the image as such:
import logo from './logo.jpeg'; // with import
or ...
const logo = require('./logo.jpeg); // with require
then plug it in...
<img src={logo} />
I'd recommend this option especially if you're reusing the image source.
I don't know the full context, but assuming this React project is using webpack or was created with create-react-app, the image files in your src directory are not automatically being copied to the built application,
Try importing the image to the file where you use it:
import orbImage from "./org.png";
Then use it like so:
<img src={orgImage} />
I will try to help you,
on the other hand for your next message try to review the formatting inspire you from the other posts thx
for your png maybe probleme is your src
// The image.png file must be in the same folder as the JS file
// We import the image using its path
import image from './image.png';
and maybe try to add width="200"
I'm brand new to using Nuxt.js, and having an issue: When I created my project, the layouts folder wasn't generated automatically as documented. I added it manually, but default.vue is not being applied anywhere. Here is layouts/default.vue:
<template>
<div>
<AppHeader/>
<Nuxt/>
</div>
</template>
I've tried things such as manually setting default as the layout in pages and manually importing the AppHeader component in default.vue (although this is definitely not the issue as other HTML I put there doesn't get rendered either). Not sure what's going wrong here, scratching my head. Using nuxt 2.15.7. If there's any additional detail needed please let me know what and I'll gladly provide, thanks.
Today, I faced the same issue, I just stop the dev command and did "npm run dev" again.
It woked like a charm.
I also faced this issue today, and it took my like 15 minutes to realize...
I just named my folder layout instead of layouts :')
I'm posting it just in case someone else is as distracted as I am
Was Facing this same issue, it was fixed by wrapping contents of app.vue with <NuxtLayout></NuxtLayout>
example:
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
For more details look here:
https://github.com/nuxt/framework/discussions/2883
Just define your components folder path in nuxt.config.js
eg:
components: {
dirs: [
'~/shared',
'~/shared/atoms',
'~/shared/molecules',
'~/shared/organisams',
]
},
I have tried everything I can think of, as well as Googled this to death. I cannot get React to load a background image using inline styles. Here is my code:
const url = './assets/backgrounds/terzo1.jpg'
const style = {
backgroundImage: `url(${url})`,
backgroundSize: 'cover',
}
const Layout = props => (
<div style={style}>
TEXT
</div>
)
export default Layout
My assets folder is in the same folder as the Layout component.
I will note that I am using Create-react-app.
Thanks
If you are using create-react-app, for loading images and using them in your JS and CSS files, there are two approaches one could take.
Images on public folder
You can add your images in a directory inside public directory and use them as follows:
const style = {backgroundImage: 'url(/images/some-image.png)'}
Images in the same directory as your CSS or JS files
If you want to use images relatively and import them dynamically, You should put your images in the same directory as the CSS or Component that you want to use image in. One of the best ways to structure your codebase is to use component scoped structure. In this way, all stuff related to a component will go in the component's directory. This contains the images too.
For more info:
Use public folder for general assets outside of src directory
Import images directly into the component file in a scoped structure
This worked for me in a React 16.11.0 project created with create-react-app:
import emailIcon from '../../assets/images/footer/icons/email.png';
<div style={{ backgroundImage: "url(" + emailIcon + ")" }}></div>
Make sure the style you try to apply is correct. In my case, width and height styles weren't applied as it was: 140px !important, instead of just 140px. As soon as I removed !important, inline style has been applied.
Inspect image in chrome console. Open image url from rendered element in new tab. It may be wrong relative path or something wrong with server public folder setup. Try to fix image url in separate tab. Once you get the image, fix path in the component accordingly