Why am I unable to view the image in the material-ui-next "Cards" example?

I came across this example on the material-ui-next website, but strangely I am unable to view the lizard image when I try to run it on my computer.

Why is the image not showing? There are no errors in my console, and the "simple card" example on the website works fine for me, but not the one with the image, like the "Lizard" example. (I suspect my error lies in the image path or src)

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const styles = {
  card: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
};

function SimpleMediaCard(props) {
  const { classes } = props;
  return (
    <div>
      <Card className={classes.card}>
        <CardMedia
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="headline" component="h2">
            Lizard
          </Typography>
          <Typography component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica.
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small" color="primary">
            Share
          </Button>
          <Button size="small" color="primary">
            Learn More
          </Button>
        </CardActions>
      </Card>
    </div>
  );
}

SimpleMediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleMediaCard);

Answer №1

After my research, I have successfully modified the image path to

  import picture from './lizard.jpg';
         <CardMedia
              className={classes.media}
              image={picture}
              title="Contemplative Reptilian"
            />

Answer №2

When incorporating an image from a URL, it is essential to utilize the img element and specify the URL path in the src attribute.

                <CardMedia
                  component="img"
                  src={imageUrl}
                />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for implementing AsyncStorage in a React Native application to store data on both TextInput and Picker components

I recently attempted to learn how to utilize the AsyncStorage feature on the React Native website, but unfortunately, I found the concept quite challenging to grasp. My goal is to implement AsyncStorage in my React Native application by saving data from th ...

How can I position one DIV relative to another DIV?

Can a DIV be positioned relative to another DIV? My guess is that it involves nesting it inside the reference DIV and utilizing position: relative. However, I'm struggling with how to achieve this without impacting the content of the reference DIV. An ...

Incorporate a click function onto the image within the canvas

After creating a canvas and placing an image on it, I realized that I need to include a click event for that image. Below is the code snippet I have written in attempt to achieve this. <canvas id="myCanvas" width="578" height="1000"></canvas> ...

django url not returning any data

Running a website using Python and Django has been quite the journey. I've implemented all the necessary changes to make it work smoothly. urls.py: urlpatterns = [ url('index.html', views.index, name='index'), url('admin/&ap ...

Encountering an issue with the `className` prop not matching when deploying to Heroku, yet the functionality works perfectly when testing locally

I encountered this specific error message: The className property did not match. On the server: "jss1 jss5" Client side: "makeStyles-root-1 makeStyles-root-5" This issue only arises when deploying to Heroku. Locally, everything runs ...

Tips for choosing an item within a div -> ul -> li using Selenium

I need help with a menu that displays a list on mouse hover, and I'm trying to click on "Logout". However, the code I've written so far is not giving me the desired result. This is the Java code I have: public void logout() throws Exception { ...

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Looking to create a fixed footer with a transparent gap at the center that is 100% fixed width? No scripts needed! EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY MY OWN SOLUTION HTML <div id="Ftr"> ...

Guide to customizing the appearance of a Bootstrap Component within an Angular project

Is it possible to completely customize the style/CSS of a component from ng-bootstrap? Here's the issue I'm facing: I have this code... <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next" style ...

Dynamically insert <td> elements into <tr> element using both jQuery and JavaScript

I am facing an issue with adding a new table data (td) element dynamically to the first table row (tr) in my JavaScript code. Here is the original table before adding the new td element: <table> <tbody> <tr> <t ...

Get rid of the underlined anchors in your email signature

I'm currently in the process of creating personalized email signatures for one of my clients. At this point, I am testing them on various platforms such as GMail, Hotmail, Brinkster, and more. One issue I am facing is trying to remove the underline t ...

Tips for efficiently updating state in React.js dynamically?

Is there a way to dynamically update the state of CurrentIndex whenever a user is selected? Currently, it is hardcoded to 0 but I would like to change that. I need the currentIndex to be updated whenever a user from the list is clicked. The SidePan ...

When switching tabs in Javascript, the page does not automatically reload. However, the page will reload only when it is on

After writing a code using javascript/Youtube API + PHP to fetch a YT video ID from a MySQL server and place it in Javascript, I realized that the page only reloads when the tab is active and not when it's in the background. This issue disrupts the wh ...

Is Your Mobile Site Displaying Differently?

Although my resume website looks great on Desktop, I recently noticed that the HTML paragraph tags do not scale correctly when viewed on various mobile web browsers (refer to the images attached below). Screenshot 1: Website displayed in Facebook Messenge ...

Do arrays permanently retain the strings stored within them?

As an 11-year-old who has been learning Javascript for the past month and a half, I am currently working on creating a login/register system. Right now, my focus is on the register part. I have a question: when adding a string/number/boolean to an array, d ...

What is the best way to tally the number of occurrences a value is true within an hour or day using React?

I am developing an alarm application and I want to track the number of times the alarm has been triggered within an hour and a day. Utilizing redux toolkit, I manage the state of the alarm (on/off) and have a reducer called countAlarm to increase the count ...

Capture an image from the webcam without any manual intervention and store it in the system's directories

Looking to automate the process of capturing a picture from a webcam once access is granted, and then saving it without any user intervention. I've managed to capture the image but struggling with: A) Automating the capture process B) Saving the ca ...

Guide to creating an uncomplicated quiz using PHP

My goal is to create a quiz with 15 questions. Every time a user lands on the page, they will see a random selection of 5 questions. Each question will have 4 multiple choice answers, with one being correct. The marks allocated for each question are 20, 15 ...

React.js - state variable becomes undefined upon uploading app to Amplify

I am encountering a perplexing error and am struggling to determine the root cause. To provide a brief overview, I have a dialog containing a jsonschema form along with an image that is uploaded to an input and saved in b64 format within a state variable c ...

Find the current value of Animated.Value in React Native

I'm attempting to create an animation using interpolate on a View element. My goal is to access the current value of my Animated.Value, but I'm unsure how to do so. The information provided in the React Native documentation was not clear to me. ...

Having trouble with clearing floats in Twitter Bootstrap CSS - any help appreciated!

Today, in an effort to learn CSS and apply it practically by creating simple themes, I decided to delve into the proper ways of clearing floats in CSS. My research led me to explore how Twitter handles this issue, so I dug into Bootstrap's CSS file an ...