I'm trying to set a background image that changes per card element. The website is a recipebook, basically I just want each individual card to be the image of the recipe.
import React from "react";
import "./card.css"
const Card = ({recipe}) => {
return (
<div className="card-bg tc dib br3 pa3 ma2 grow bw2 shadow-5" style={{backgroundImage: `url("${recipe.img}")` }}>
<p className="test">{recipe.name}</p>
<p className="desc">
Recipe type: {recipe.type}
</p>
<p className="desc">
Author: {recipe.author}
</p>
<p className="desc">Recipe Link</p>
<hr />
</div>
);
};
export default Card;
I'm not getting any errors from this, but nothing is changing in the background. What am I doing wrong?
fyi, the image path is located in the json file as per below, per recipe:
{
"id": 1,
"name": "Carrot cake",
"type": "sweet",
"author": "Grandma",
"link": "recipes/carrotcake.html",
"img" : "../img/carrot.jpg"
},
Thanks in advance!
EDIT: The background property is showing in chrome devtools on inspection, it just isn't visible.
EDIT:EDIT: I've discovered that I can move the IMG folder anywhere in the project and not change the image path, and despite this, chrome developer tools still shows the background property on the DIV at the original path, yet doesnt throw an error...
Seems like you made mistake in style={{backgroungImage: url("${recipe.img}")
Change g with d. If it does not fix and you are using API to get the image, I would recommend you to check API to see image part.
Try moving the img folder into the public folder of the react app, and change the file path to '/img/carrot.jpg'.
I had this same issue a while back, and I think this is what fixed it.
backgroundImage: `url(${Background})`
Related
I'm following an online course and faced a tricky issue for me:
The final project (using React and an API) takes a link of an online 'jpg' photo so that when you press a button it displays that photo and recognize the faces on it.
I want to apply this for my own local images on my PC as well but failed to figure out the way.
I need at least to be able to display a local image when providing it's local path then pressing the button.
Please Help!
The files are as follows (by brief of course):
App.js
import React from 'react'
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
render() {
return (
<div className="App">
<ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
<FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
</div>
);
}
export default App;
ImageLinkForm.js
import React from 'react'
const ImageLinkForm = ({onInputChange, onButtonSubmit}) => {
return (
<div>
<input className="f4 pa2 w-70 center" type="text" onChange={onInputChange}/>
<button className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple" onClick={onButtonSubmit}>Detect</button>
</div>
)
}
export default ImageLinkForm
FaceRecognition.js
import React from 'react'
const FaceRecognition = ({ imageUrl, box }) => {
return (
<div className="center ma">
<div className="absolute mt2">
<img id="inputimage" alt="" src={imageUrl} width="500px" height="auto"/>
</div>
</div>
)
}
export default FaceRecognition
So as you can see the imageUrl is taken from the input text, and transferred as a parameter to FaceRecognition.js, then it is given as src to the img.
My Problem is that if I'm using a local file like (my_image.jpg) this procedure is not working. I put (my_image.jpg) in the input text and press the button but the photo is not displayed at all.
I even tried (./my_image.jpg) , (http://localhost:3000/image.jpg), (http://localhost/image.jpg), (file:///my_image.jpg) and other stuff etc but never succeeded.
Any idea how to fix this issue in React? I want to display a local image by using it's path in my application, so it is not a fixed image every time. I know that using import (import image from my_image.jpg) can allow me to import a specific image and then display it by using <img src={image} /> but here the application is dynamic and should be applied on different images every time depending on the path I enter in the input text.
Thanks in advance
The reason is that the src property of the img component is not looking for a string path on disk. When you use the input tag type of file, you are getting back a location to a file but you're in need of a blob file object in memory.
So in order to display the image, you need to create a blob URI from that path and then set that to the img src property appropriately.
//inside your input onChange event...
var fileName = event.target.value; //<==== just the name
var fileBlob = URL.createObjectURL(event.target.files[0]); //<==== the actual file object
You can now set fileBlob to a piece of State and set
<img src={mystate} alt='something'/>
I want to upload some photos in my Google Drive and would like me to display those photos. I'm actually using React.js right now and I'm really new to programming. I just wanna display the photos and have the specific date related to the photos. I'm searching on google and youtube and I still have no clear answers.
Try the following:
1) Obtain the public link of your uploaded google drive image:
my case: https://drive.google.com/file/d/1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-/view?usp=sharing
2) Extract the id from the link:
my case: 1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-
3) Use the following url structure in react:
<img src="https://drive.google.com/uc?export=view&id=INSERT_HERE_YOUR_GOOGLE_DRIVE_IMAGE_ID" alt="drive image"/>
4) Result:
<img src="https://drive.google.com/uc?export=view&id=1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-" alt="drive image"/>
For further doubts watch this video: https://www.youtube.com/watch?v=iajv8y-6n3Q that I made.
First of all, Go to your Google Drive and Share the link of photos in a public mode.
Then copy the id of your photos link.
Replace the ID's of your photo urls => https://drive.google.com/thumbnail?id='your photo link id'
Then Copy the Above by replacing ID and Paste it in Img Src of React Js App.
Then Run React Js App
import React from 'react';
function App() {
return(
<div>
<img src="https://drive.google.com/thumbnail?id='your photo link id'" alt="image" />
</div>
);
}
export default App;
If Img tag don't work, try to use this
<img src={require('https://drive.google.com/thumbnail?id='your photo link id').default} />
I Hope it works. Note my export view thumnail size, you can change the size according to your style requirement.
I am trying to create a page where I show Pizza items with their images. The Pizza object is saved in the DB with a field imgUrl. The image is not getting displayed but I see the alt text that I provided but I can see in the console that the image link is correct.
Right now, the imgUrl field in the database has data like ../assets/images/pizza.jpg. Should I instead save require(../assets/images/pizza.jpg) in the db. That looks weird. Here is the code, please look at the mounted method.
<template>
<div>
<div class="class">
<span><h1>All you can eat Menu.</h1></span>
<div class="container">
<div class="box" v-for="item in pizzaList" :key="item.id">
<div>
<img :src="item.imgUrl" alt="Image"/>
<div>
<a class="btn" #mouseenter="$event.currentTarget.style.background = '#EF6B7F'"
#mouseleave="$event.currentTarget.style.background = '#e31837' ">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
pizzaList: []
}
},
mounted: function () {
axios.get('http://localhost:8081/api/pizza/all')
.then(response => {
this.pizzaList = response.data;
})
.catch(e => {
console.log(e);
})
}
}
</script>
I have already read
Vue and API: Displaying Image
Image path in Vue JS
How to reference static assets within vue javascript
but what these answers are telling is how to do when we have hardcoded the url, we should encapsulate it with require but they do not tell when we are getting the link from the DB, how do we put require in the html tag.
I hope my question was clear. Please ask for details if you need. thanks
The reason it was not working was because
Webpack's require() needs at least some part of the file path to be completely static and we should "make only part of the path dynamic"
that means you cannot put the entire image path in the DB and in the UI pass it to require and expect it to work
I replaced
<img :src="require(`${item.imgUrl}`)" alt="Image"/>
where item.imgUrl = '../assets/entities/pizza/pizza_1.jpg' (which is the entire image path relative to the component)
by
<img :src="require(`../assets${item.imgUrl}`)" alt="Image"/>
where item.imgUrl = '/entities/pizza/pizza_1.jpg'
This answer mentioned by Michal Levy up in the comments explains all this
https://stackoverflow.com/a/64208406/8147680
Please see here the relations between components
How to pass value from one child component to another in VueJS?
The snippet bellow not giving an error and not displaying the image
<img v-bind:src="image_url" />
Code:
<template>
<div>
<img v-bind:src="image_url" />
</div>
</template>
<script>
export default {
props: ["image_url"]
};
</script>
image_url comes from another component and in VueJS developer's tool I was able to confirm the value is an url. Looks like something wrong with the way how I'm trying to render a dynamic image.
You have to expose your images to your web server. Hopefully Vue-cli does that for you. You have to move your assets folder from src to the public folder.
More info on https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Don't forget to add.
<div v-if="image_url">
<img v-bind:src="image_url" />
</div>
Might worked on yours. Make a watcher for that to update again the props value an rerender it in your component.
export default {
props: ["image_url"],
watch: {
image_url(val){
this.image_url = val
},
}
};
I have an SVG in a folder icon.svg, I'm trying to render it in a button along with text. Specifically, it's the Google icon and i'm trying to render it next to some text that says "SIGN IN WITH GOOGLE"
I'm importing the SVG as is and trying to pass it next to the button but, the file path is rendering instead:
function App() {
return (
<div className="App">
<button>{SVG}SIGN IN WITH GOOGLE</button>
</div>
);
}
That renders a button that says /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE
How is one supposed to render the icon inside the button properly?
EDIT: I've been messing with the icon and the button and got close:
https://codesandbox.io/s/10k7rr3rp4
First you have to save the icon in assets folder. Then import it into the component which you want to use in
import {ReactComponent as Logo} from '../../assets/google.svg';
Now you can use it like a component
<button>
<Logo className='logo' /> Sign in with Google
</button>
You can use the require function as follows:
<button><img src={require(SVG)} alt="test" />SIGN IN WITH GOOGLE</button>
another solution could be to use styled-components with ::before pseudo element.
i just moved the images folder to the public folder.
live example