logo
down
shadow

How to display dynamically fetched image on client end in react?


How to display dynamically fetched image on client end in react?

Content Index :

How to display dynamically fetched image on client end in react?
Tag : reactjs , By : picamiolo
Date : January 12 2021, 09:11 PM

I wish this help you There's a lot going on in your code. You've some problems with asynchronous calls and also not all functions are bound to this. I would suggest to convert your code to async/await to make it more readable and use named functions, because they are automatically bound to this.
getAllEventsData = async () => {
    const response = await axios({
        method: 'POST',
        url: '/api/Account/GetAllEventsData',
        contentType: 'application/json',
        data: {},
    })
    console.log(response);
    this.setState({
            eventDetail: response.data
        });
    this.getAllImages()
}
getAllImages = async () => {
    const response = await axios({
        method: 'POST',
        url: '/api/Account/GetAllEventImages',
        contentType: 'application/json',
        data: {},
    })
    console.log(response);
    await this.setState({
            images: response.data
        });
    this.getImageBlobs();
}
getImageBlobs = async () => {
    const { images } = this.state
    console.log("Image Objects:", images);
    const imageArr = await Promise.all(
                        images.map(image => this.fetchEventImage(image.image_path))
    this.setState({
        imagesInBlob: imageArr
    });
    console.log("Images in Blob:", this.state.imagesInBlob);
}
fetchEventImage = async (imagePath) => {
    var path = {
        ImagePath: imagePath
    }
    try {
      const response = await axios({
          method: 'POST',
          url: '/api/ImageFetch/FetchEventImages',
          responseType: 'blob',// important
          headers: {
              'Content-Type': 'application/json'
          },
          data: path
      })
      const url = window.URL.createObjectURL(new Blob([response.data]));
      console.log("URL: ", url);
      return url
    } catch(error) {
        console.log("Status:", error.response.status);
        console.log("Data:", error.response.data);
    }
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How to display the fetched json from redux in my react component?


Tag : json , By : Ian
Date : March 29 2020, 07:55 AM
I wish this helpful for you You can use connect from react-redux to get the content of react-redux state and pass them as props in the react component
import React from 'react';
import _ from 'lodash';
import {connect} from 'react-redux';

class Poems extends React.Component {
    render(){
       return (
           <div>
               //poems from state will be passed as props to this component
               {_.map(this.props.poems, poem => {
                   return (
                       <div>
                          <div>{poem.title}</div>
                          <div>{poem.text}</div>
                       </div>
               )}
           </div>
       );
    }
}

const mapStateToProps = (state) => ({
   poems: getPoems(state);    //method to get poems from redux state
});

export default connect(mapStateToProps)(Poems);

Angular 6 display image fetched from AWS S3


Tag : angular , By : PepeM
Date : March 29 2020, 07:55 AM
wish helps you The problem is, that you used invalid Parameters to your API calls - the SDK doesn't know what to do with region, accessKeyId and secretAccessKey:
const params = {
  Bucket: 'asdasd',
  region: 'asadas1',                      // Here,
  accessKeyId: 'SADIYIUYSADSA8768GHSAD',  // here
  secretAccessKey: 'sdas+sadJSADH7',      // and here

}
AWS.config.update({
    region: 'us-east-1',
    accessKeyId: "Don't do this",
    secretAccessKey: "It's a terrible idea!"
});

How to display a particular clicked image from multiple image fetched from database using while loop in php, and javascr


Tag : javascript , By : Eric
Date : March 29 2020, 07:55 AM
it helps some times I haven't tested this, since i haven't got a PHP setup running. But I think one way to solve this, could be something like this:
<!DOCTYPE html>
    <html>
    <head>
<title>Home</title>
<link rel = "stylesheet" type = "text/css" href = "accounts.css">
    </head>
    <body>
    <?php 
$servername = 'localhost';
$user = 'root';
$passwords = 'root';
$dbname = 'project';

$conn = new mysqli($servername, $user, $passwords, $dbname);

if($conn->connect_error)
{
    die("Could not connect... ".$conn->connect_error);
}

$sql = "SELECT photo_url FROM photo WHERE username = '$username'";
$result = $conn->query($sql);
if($result->num_rows > 0)
{
    $i=0;
    while($row = $result->fetch_assoc())
    {
        $i++;
        echo "<span id = 'photos'>";
        echo "<img onClick='showImage(" . $i . ")' id = 'myProfile" . $i . "' src = '".$row['photo_url']."' alt = 'photo' width = 190px' height = '200px' style = 'border: 1px solid #aaaaaa;'>";
        echo "</span>";
        echo "<div id = 'popUp" . $i . "' class = 'pop1'>";
        echo "<span class = 'close1' onClick='closeImage(" . $i . ")'>&times;</span>";
        echo "<img class = 'pop-content' id = 'img" . $i . "'>";
        echo "</div>";
    }
}
else
{
    echo "<p>You haven't uploaded any photo.</p>";
}
$conn->close();
    ?>
    <script>
    function showImage(intId) {
        var pop1 = document.getElementById('popUp'+intId);
        var img1 = document.getElementById('myProfile'+intId);
        var popImg1 = document.getElementById('img'+intId);
        pop1.style.display = 'block';
        popImg1.src = img1.src;
    }

    function closeImage(intId) {
        var pop1 = document.getElementById('popUp'+intId);
        pop1.style.display = 'none';
    }
    </script>
    </body>
    </html>

How to display fetched data in react native


Tag : react-native , By : Nickolas
Date : March 29 2020, 07:55 AM
it fixes the issue Flatlist data property expects an array.
But you seem to set an object.
state = {
   items:[]
}

display() {
  fetch('myUrl', { method: 'GET'})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
        items: responseJson
   })
 })
 .catch((error) => {
   console.error(error);
 });
}
<View>
  <FlatList
    data={this.state.items}
    renderItem={({item}) => <Text key={item._id}>{item.title}</Text>}
    keyExtractor={ item => item._id}
    />
</View> 

SAP B1, How to display fetched Image from ItemImage?


Tag : javascript , By : Val
Date : September 01 2020, 10:00 AM
To fix the issue you can do If you want to use images dynamically, you have to fetch the images as soon as the component is mounted and insert it afterwards. The fetched picture should then be saved in the state of the component and included from there in the src attrbut of the img tag. Assuming you can already fetch the picture, the code below should work.
import React, { Component } from "react";

export default class ComponentWithFetchedImage extends Component {
  constructor() {
    super();
    this.state = { image: undefined };   
  }

  componentDidMount() {
    let fetch_url = "https://picsum.photos/200";   // Insert your fetch url here
    fetch(fetch_url)
      .then(res => res.blob())
      .then(blob => URL.createObjectURL(blob))
      .then(url => this.setState({ image: url }))
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div className="component">
        <img src={this.state.image} alt="" />
      </div>
    );   
  }
}
Related Posts Related QUESTIONS :
  • how to pass props one page to another page via react router?
  • How to display react numerical props only if they pass from the container?
  • Input in another component, error with target
  • What is the difference between props and children in Gatsby?
  • Validating conditional pairs of props with Typescript
  • React-Dropzone how convert each file to base64
  • How to change the return of a function to int?
  • Import only grid system from bootstrap to react
  • TypeScript Type for function arguments not erroring?
  • Unexpected user of comma operator no-sequences
  • React Native onChangeText like onChange in ReactJS
  • How to dynamically render an element on clicking a button
  • Cannot import components from react-bootstrap
  • How to prevent Office UI Fabric React DatePicker flyout from stealing focus when allowTextInput is true?
  • How delete item from redux state?
  • Uncaught TypeError: map is not a function In Reactjs with Firebase
  • Alternative to componentWillReceiveProps for my particular use case
  • Pokemon, API call Variable doesn't save
  • Rendered more hooks than during the previous render. when posting form data with React Hooks
  • How can I envoke <Link to=''> route transition from a custom function?
  • How to change certain div color base on number
  • Hide Navbar on some routes (React Router v5)
  • is it safe to ignore react's warning about calling the useState hook conditionally when only the parameter is conditiona
  • How to pass a function as a prop to React function component?
  • Creating a function that replace a letter with a line break
  • How to add and remove property from Redux state
  • Can I, (and should I), make assertions about what HTML elements a component renders using Enzyme's shallow()?
  • Testing function calls in Jest after button click (mocking fetch calls)
  • How can I show a card shadow on all sides?
  • Jest - Map through an Array of Items and test their Values
  • Run Effect hook only when both dependencies change
  • What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So wh
  • Font size of tooltip in speeddialaction of React's Material UI
  • Module Not Found - Webpack Dev Server
  • React not rendering all elements within a list of components
  • How to change attribute of a React Element
  • ReactJs: How to back focus to input field after resetting the form
  • Multilanguage in react using redux
  • React JS — how do I add child components and set calculated transformations?
  • ReactJS componentDidUpdate() prevState equals to currentState
  • TypeScript error: JSX element type 'Tree' does not have any construct or call signatures. I'm not able to import my own
  • createProvider is not exported from react-redux?
  • Error:(19, 35) TS2304: Cannot find name 'T'. Why I can't extend interface in TS?
  • How can I secure images in S3 buckets with Auth0 and a React front-end
  • React Import Multiple Functions
  • React render when props change
  • Cannot read property 'array' of undefined
  • What is the expected return of `useEffect` used for?
  • Why i need to install npm for react native app
  • How to fix 'module not found' for audio files using file-loader? Images, CSS, and JSON are working just fine
  • Can't render the component received as a prop.children in my parent component
  • rootInstance.findByType("input"); Giving Expected 1 but found 2 instances with node type : "undefined&quo
  • Reset state to initial state only for specific state variables
  • Get error TS2322: Type 'any' is not assignable to type 'never'
  • Is it possible to update the store outside of the Provider context in Redux?
  • Copy to clipboard is copying value with two newlines
  • How to test useRef with the "current" prop in jest/enzyme
  • How to remove value of each key in Async Storage in React Native at the time of Logout
  • Is there a simpler way to write this React code
  • Auth0. How to get user's permissions in access token?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com