React doesn't insert image as background - javascript

I'm creating a web page and I took a jpg and pgn image to put as a background.
But by no means does it appear on the page.
import './Entrada.css'
const Entrada = () => {
return(
<div style={{
backgroundImage: "url(/secoes_02.jpg)"
}}>
<div><img src='secoes_02.jpg'/></div>
<div className='texto'>testatastastasta</div>
</div>
)
}
export default Entrada
In the code above I can place the image as a figure, but I cannot as a background.
I've already tried to insert it by Css and tried import to.
.geral{
background: url("/public/img/partes/secoes_02.jpg");
}
But in no way does it appear in my react.
I already reinstalled the nodejs packages and changed the folder location.
And the error continues.
Has anyone experienced this?

Try it plz. It works for me.
import footer from '../../assets/images/footer.png';
function MyComponent() {
return (
<footer style={{ background: `url(${footer})`, backgroundSize: "contain" }}>

Try this.. worked for me
js:
render() {
return (
<div className="bgimage">
<div className='texto'>testatastastasta</div>
</div>
)
}
css:
.bgimage {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url(https://business.adobe.com/content/dam/dx/us/en/products/magento/open-source/open-source-marquee-2x.png.img.png);
}
Height is given 100%, based on your need you can adjust.

Related

Is there any way I can fix input tag without using position : fixed?

Hi I am just trying to make some fixed part in my webpage. I want some text, input tag to be fixed. But when I wrote a code like down below, I get to know that I can't type in text field.
I don't know why I can't.
Does anybody know Why is this happening and how can I fulfill my goal?
thankyou
import React from "react";
import { Container, Row } from "react-bootstrap";
function Introduce(props) {
return (
<div>
<div className="introduceSquare">
<Container fluid>
<Row>
<h1> Meet to Share Emotion</h1>
<h2>Where to go?</h2>
<input
className="code"
autoComplete="on"
placeholder="code door plz"
/>
</Row>
</Container>
</div>
</div>
);
}
export default Introduce;
this is css code
.introduceSquare {
width: 100%;
text-align: center;
position: fixed;
margin-top: 10%;
z-index: -998;
color: #fdfce5;
}

Properties background image not working [React]

I'm trying to set the background image of a div depending on the value of a component property, the background doesn't show, however it does show when I harcode the background-image property in the css file.
Here is the component code :
import React, { Component } from "react";
import "./Banner.css";
export default class Banner extends Component {
render() {
const style = {
backgroundImage: `url("${this.props.image}")`,
};
return (
<div className="banner" style={style}>
Chez vous, partout et ailleurs
</div>
);
}
}
Here is the Banner.css file:
.banner {
/* background-image: url("../assets/images/moutains.png"); */
background-size: cover;
height: 170px;
border-radius: 20px;
text-align: center;
vertical-align: middle;
line-height: 170px;
font-size: 2.5rem;
color: #fff;
}
In the parent component:
<Banner image="../assets/images/moutains.png" text="" />
EDIT: Complete code and assets here: https://github.com/musk-coding/kasa
codesandbox: https://codesandbox.io/s/github/musk-coding/kasa
Thanks in advance for your help
Since, you are trying to access the image directly in your Component using the inline CSS. You must move your image to the public folder.
CODESANDBOX LINK: https://codesandbox.io/s/image-relative-path-issue-orbkw?file=/src/components/Home.js
Code Changes:
export default class Home extends Component {
render() {
const imageURL = "./assets/images/island-waves.png";
return (
<div className="container">
<div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
Chez vous, partout et ailleurs
</div>
<Gallery />
</div>
);
}
}
NOTE: From React Docs, you can see the ways to add images in Component. create-reac-app-images-docs. But since you want an inline CSS, in that case we have to move our assets folder into the public folder to make sure that the image is properly referenced with our component.

How do I load images from a folder using vue-gallery?

I'm trying to make a gallery with vue-gallery, but I'm not exactly sure how to load images from a folder.
It should also be noted, I'm using the nuxt.js framework.
I've tried just adding the images one by one, but that would be unconventional since I would like to be able to upload images to that folder, and not worry about having to add images to an array. I know node.js, but I'm not sure how to get files in folders without fs.
I am using nuxt.js with vue and vue-gallery installed.
<template>
<div>
<gallery :images="images" :index="index" #close="index = null"></gallery>
<div
class="image"
v-for="(image, imageIndex) in images"
:key="imageIndex"
#click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</div>
</template>
<script>
import VueGallery from 'vue-gallery';
export default {
data: function () {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null
};
},
components: {
'gallery': VueGallery
},
}
</script>
<style scoped>
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #ebebeb;
margin: 5px;
}
</style>
This is the that I'm using, which displays those dummy images. I am unsure how to read from a folder and add them into the images array that vue-gallery` requires.
Expected results: vue-gallery displays the images properly from the folder.
There is no error, it's just me not knowing what to do. lol
I just got it working using this
Click Me

Change the background image dynamically

I would like to modify the image in the background with the help of a comment.
The images come from the tmdb API.
So I think you have to create a background image component and pass it on to the URL.
I know that CSS has the background-image property, but it works for static images ...
What is the best method, I would like to make this component reusable.
Here is how you would have to do it.
Create your <div> and its style with a default background-image
Create 3 <button> to triggers your function changeImage() and provide a parameter
Change the style.backgroundImage with JavaScript such as below:
function changeImage(category){
document.getElementById('div-bg').style.backgroundImage = 'url("https://source.unsplash.com/320x240/?' + category + '")';
}
#div-bg {
display: block;
width: 320px;
height: 240px;
background-image: url("https://source.unsplash.com/320x240/?sky");
}
<div id="div-bg"></div>
<button onclick="changeImage('nature')">Nature</button>
<button onclick="changeImage('animal')">Animal</button>
<button onclick="changeImage('fire')">Fire</button>
If you have any question, please ask!
By doing this it works, I have my background. But I did not manage to do it with a reusable component
import React from 'react';
const VideoDetail = ({ title, description, background }) => {
const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500/";
const backgroundStyle = {
color: 'white',
backgroundRepeat: 'no-repeat',
backgroundAttachment: 'scroll',
backgroundPosition: 'center',
backgroundSize: 'cover',
width: "100%",
height: "400px",
backgroundImage: `url(${IMAGE_BASE_URL}${background})`
};
return(
<div>
<div style={background !== undefined ? backgroundStyle : null }>
<h1>{title}</h1>
<p>{description}</p>
</div>
</div>
)
}
export default VideoDetail;import React from 'react';

Preload all pictures in create-react-app

I use this to create card game. Now pictures are loaded directly after the rendering of the card component with background-image. Therefore sometimes there are friezes. I want all the pictures to be loaded before showing the main screen using a preloader. Tell me please how to do this. Thank you.
import React from 'react';
import '../styles/Card.css';
const Card = (props) => {
const cardClick = () => {
if(props.status === 'unselected') {
props.onCardClick(props.cardIndex);
}
};
return (
<div className={`card card-${props.cardName} card-${props.status}`} onClick={cardClick}>
<div className="card-inner">
<div className="card-face card-front"></div>
<div className="card-face card-back"></div>
</div>
</div>
);
}
export default Card;
/*Set background to cards*/
.card-0C .card-front {
background: url('../images/cards/0C.png');
background-size: cover;
}
.card-0D .card-front {
background: url('../images/cards/0D.png');
background-size: cover;
}
.card-0H .card-front {
background: url('../images/cards/0H.png');
background-size: cover;
}
.card-0S .card-front {
background: url('../images/cards/0S.png');
background-size: cover;
}
.card-2C .card-front {
background: url('../images/cards/2C.png');
background-size: cover;
}
.card-2D .card-front {
background: url('../images/cards/2D.png');
background-size: cover;
}
Well there are a few ways. I'm gonna try and do my best to explain what you can do.
Use html preload attribute. reference here
The preload value of the link element's rel attribute allows you to
write declarative fetch requests in your HTML head, specifying
resources that your pages will need very soon after loading, which you
therefore want to start preloading early in the lifecycle of a page
load, before the browser's main rendering machinery kicks in. This
ensures that they are made available earlier and are less likely to
block the page's first render, leading to performance improvements.
This article provides a basic guide to how preload works.
<link rel="preload" href="style.css" as="style">
<img rel="preload" src="image.png" as="image" />
NOTE: you would have to ditch the background css usage.
Use actual styled html for the cards.
This is more complex way of doing what you want. Dropping the images and using straight up html styled with css. This is perfectly doable and adds the bonus of complex animations to the cards elements if you ever do so desire.
Use SVGs
This one is very similar to the HTML option because you would have to use an svg-loader to make it go straight into your html.
Declare all your images in a hidden div making sure that the browser has your images loaded always. reference here
This one is a bit meh but does the job nonetheless.
It consists of having a hidden div like so:
div#preload { display: none; }
Then your app would load images
// assuming you have the proper loaders configured
const cardOne = require("path/to/card1/img");
const cardTwo = require("path/to/card2/img");
...
render() {
return (
<div id="preload">
<img src={cardOne} />
<img src={cardTwo} />
{/* etc... */}
</div>
);
}
This div would always be rendered ensuring the browser loaded the images on first contact and your app would have the images cached and you could use a background solution like shown in the link:
#element_01 {
background: url(path/image_01.png) no-repeat;
display: none;
}
#element_02 {
background: url(path/image_02.png) no-repeat;
display: none;
}
#element_03 {
background: url(path/image_03.png) no-repeat;
display: none;
}

Categories