We Keep Coding

React doesn't insert image as background

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.

does not show the default image when there is an error loading the product image

I am using Vuetify and Nuxt.js.
After searching for products, a table is displayed with their list in the rows of which an image of each product is shown.
If the product does not have an image and a 404 error appears, then the default image should appear, which is stored in /assets/images/nofoto.png.
I also use v-hover for these images.
When the table is normally loaded, the image is not displayed by default,
but when you hover the mouse using v-hover to the place where the picture should be, then it appears.
If you remove v-hover, then the image by default does not show at all.
Tried using :eager="true" but it didn't work.
I thought the reason was dynamic :src and Webpack converts it to normal src, but attempts to fix it have failed.
Maybe I was wrong and that's not the point.
Tried looking for an answer in the Vuetify documentation but couldn't find anything on the matter other than :eager.
Can you please tell me what could be the reason that nofoto.png is not displayed immediately without hovering over v-hover?
import getImageURL from "#/js/images";
methods: {
getImageURL(id, def) {
return getImageURL(id, def);
},
<template v-slot:item.productID="{ item }">
<v-hover v-slot="{ hover }">
<div class="wrap-image">
<v-img :class="{ 'show-img': hover }"
class="imageItem"
:src="item.error ? require('../../assets/images/nofoto.png') :getImageURL(item.productID, true)"
v-on:error="item.error = true" content-color-bg="transparent" contain alt="Your image description">
</v-img>
</div>
</v-hover>
</template>
.show-img{
transform: scale(1.2);
}
.wrap-image{
display: flex;
overflow: hidden;
height: 85px;
max-width: 100px;
}
.imageItem {
align-self: center;
max-width: 80%;
transition: 0.5s ease;
}

Why height: 0 can not work in css definition

In my project, I use vue.js 2, and i have an img component.
Here is code of it:
<template>
<div class="banner">
<img class="banner-img" :src="bannerImg"/>
</div>
</template>
<script>
export default {
name: 'DetailBanner',
props: {
sightName: String,
bannerImg: String,
gallaryImgs: Array
}
}
</script>
<style lang="stylus" scoped>
.banner
position: relative
overflow: hidden
height: 0
padding-bottom: 55%
.banner-img
width: 100%
The url of img is :
http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg
Here i don't want to display this img, so i set height:0 in CSS.
But unlucky, It fails. I have tested for removing height: 0, and it shows all the same.
why height: 0 can not work, who can help me?

You could take advantage of Vue.js and use v-if to show/hide your image as follow :
<template>
<div class="banner" v-if="showImg">
<img class="banner-img" :src="bannerImg"/>
</div>
</template>
<script>
export default {
name: 'DetailBanner',
props: {
sightName: String,
bannerImg: String,
gallaryImgs: Array
},
data(){
return{
showImg:false
}
}
}
</script>
you could put showImg in your props, by this way you could change the image state using only Vue.js and avoid struggling with CSS

Dynamic image is not loaded via :src

I am working on a simple Vue app, using vue-cli and webpack for that purpose.
So basicly i have 2 components, a parent and a child component ~
like this:
<template>
<div class="triPeaks__wrapper">
<div class="triPeaks">
<tri-tower class="tower"></tri-tower>
<tri-tower class="tower"></tri-tower>
<tri-tower class="tower"></tri-tower>
</div>
<div class="triPeaks__line">
<tower-line :towerLine="towerLineCards" />
</div>
<tri-pack />
</div>
</template>
the towerLineCards is the important thing there, it is a prop that is passed to the tower-line component, it is basicly a array with 10 elements, it is a array with 10 numbers that are shuffled, so it can be something like that:
[1,5,2,6,8,9,16,25,40,32]
this array is create via beforeMount on the lifecycle.
On the child component:
<template>
<div class="towerLine-wrapper">
<div class="towerLine">
<img v-for="index in 10" :key="index" class="towerLine__image" :src="getImage(index)" alt="">
</div>
</div>
</template>
<script>
export default {
props: {
towerLine: {
type: Array,
required: true
}
},
method: {
getImage (index) {
return '#/assets/images/cards/1.png'
}
}
}
</script>
<style lang="scss">
.towerLine {
display: flex;
position: relative;
top: -90px;
left: -40px;
&__image {
width: 80px;
height: 100px;
&:not(:first-child) {
margin-left: 3px;
}
}
}
</style>
the issue is with the :src image that i am returning via the getImage(), this way it is not working. If i change to just src it works just fine, i did this way just to test, because the number in the path should be dynamic when i got this to work.
What is wrong with this approach? any help?
Thanks

Firstly, you should use a computed property instead of a method for getImage().
And to solve the other problem, you could add require(YOUR_IMAGE_PATH) when you call your specific image or put it inside /static/your_image.png instead of #/assets/images/cards/1.png.

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;
}