Develop Reference

displaying a local image in React by pressing a button and using it's local path

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'/>

How do I display images from Google Drive on a react front-end website?

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.

How to render File object to HTML element (using Vue.js)

I'm having some problems rendering an image in a HTML element. I think the solution might be simple for experienced front end devs.
I have a Vuetify component that lets user input a profile image:
<v-form>
<v-avatar size="144">
<v-icon hidden ref="default_icon" size="144">account_circle</v-icon>
<img ref="my_img" style="display: none;" :src="my_photo.name">
<v-btn #click="$refs.my_input.click()" class="img_btn" absolute right small fab dark color="pink">
<v-icon dark>add</v-icon>
</v-btn>
<input ref="my_input" hidden type="file" accept="image/*" #change="onFileChange($refs.my_input)">
</v-avatar>
</v-form>
When the element calls onFileChange it pass the HTML element to the function.
onFileChange(event) {
this.my_photo = event.files[0]
console.log(this.my_photo)
this.$refs.default_icon.style.display = "none"
this.$refs.my_img.style.display = "inline"
}
So now the function replaces the icon with the img tag. I want to fill the image tag with the image that the user inputs. this.my_photo is a File type variable.
Does anyone know how to do this?
Regards for everyone!

my_photo.name is literally just the name of the uploaded image. You need to convert the uploaded image to a valid format for the image src.
You can do this a couple ways using either FileReader.readAsDataURL() or URL.createObjectURL(). These create source representations that the image tag can use.
Keep in mind that if you plan on uploading this image to a server you will need to keep a reference to event.target.files[0].
Here an example using URL.createObjectURL().
new Vue({
el: "#app",
data: {
my_photo: '',
},
methods: {
onFileInput(event) {
const data = URL.createObjectURL(event.target.files[0]);
this.my_photo = data;
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<input type="file" #change="onFileInput($event)">
<img :src="my_photo" alt="">
</div>

Is there any equivalent to the HTML anchor tag on Nativescript?

I'm trying to display a simple image or text with a link such as an HTML <a> anchor tag
<ListView [items]="items | async" (itemTap)="onItemTap($event)">
<template let-item="item">
<StackLayout>
<Image [src]="item.imageUrl" ></Image>
<!--<Image [src]="item.imageUrl" href="http://google.com"></Image>-->
</StackLayout>
</template>
</ListView>
It seems the only options is to be using onItemTap and getting the item url and manually setting the url content to be displayed on a separate webview. Are there any tags that would automatically open a separate browser page on the phone and display the URL content of the item?

For your case, you could use openUrl() and on tap Event on some of the components to open the needed page. For example:
export function onTap(args:EventData){
openUrl("https://www.google.com");
}
You could also review the sample project here.

How to display an <img> in Vue.js only if the image url exists?

I'm getting a bunch of tweets from the Twitter API. Some tweets have images attached to them, some don't.
Currently, I use this code to display the image of a tweet:
<template lang="jade">
div Tweet text
img(:src='tweet.entities.media[0].media_url', width='100%')
</template>
<script>
import store from './store.js';
export default {
name: 'tweet',
data () {
return {
tweet : store.selectedTweet
}
}
}
</script>
The problem is that this only works if the tweet actually has at least one image. If it has no image, I get an exception because tweet.entities.media is undefined.
How can I fix this so that the <img> is only used if there is actually an image available in the tweet's entity value?

You could use v-if:
<template>
<div class="Tweet text">
<img :src="tweet.entities.media[0].media_url" width="100%" v-if="tweet.entities.media" />
</div>
</template>
Using v-if will stop the img element to be rendered.

In string templates, for example Handlebars, we would write a conditional block like this:
{{#if tweet.entities.media}}
img(:src='tweet.entities.media[0].media_url', width='100%')
{{/if}}
In Vue, we use the v-if directive to achieve the same:
<template>
<div class="Tweet text">
<img :src="tweet.entities.media[0].media_url" width="100%" v-if="tweet.entities.media" />
</div>
</template>
Here you find the Documentation