Having an issue displaying images. Looking at the documentation and I don't know what I am missing.
I can't get the image component to show.
This is all from WhatsNew.js, I am calling an IG logo
import { ReactComponent as Instagram2 } from '../images/instagram2.svg'
Below I am also calling for a media file that is in the same folder but I get a non working image.
<CardMedia
image='../images/blog-post-01.png'
style={{height: 140}} />
<CardContent>
Here is my live link and this is the repo GitHub
I think what you are doing now is right. Your image address/url is wrong. I tried this with a url of an image on the internet and it works.
<Card>
<CardMedia
image="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80"
style={{ height: 140 }}
/>
</Card>
Try this in the URL. It might work.
image="/static/images/blog-post-01.png"
OR import the image
import blog from '../images/blog-post-01.png';
<CardMedia
image={blog}
style={{ height: 140 }}
/>
the image to show must be given as object like this :
<CardMedia
image={Instagram2 }
style={{height: 140}} />
<CardContent>
Related
I'm trying to import an external tag on my page so that it'll be visible in the dropdown area. But this external view is taking a full page. When I inspect this in console, I'm finding it above all divs but I'm placing it in the dropdown menu.
<Popover content={RequestFeatureModal} placement={'bottom'}>
Request a feature
</Popover>
const RequestFeatureModal = (
<Menu style={{ width: '100px' }}>
<UpvotyWidget
id="upvoty-display"
style={{ maxHeight: '100px', maxWidth: '100px' }}
baseUrl={'sample.upvoty.com/b/feature-requests'}
boardHash={this.state.ssoToken}
/>
</Menu>
);
Am I doing something wrong? What is the way to import external sources in our project at specific position?
I am having a requirement where I need to create overlay with disabled background using React-Native's ActivityIndicator, the functionality is working fine but I am finding it hard to create overlay that too at the centre of the screen because of my code structure
Code
<ScrollView alwaysBounceHorizontal={false} horizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
<View>
<Test1 listData={testData1} />
<Spacing />
<Test2 listData={testData2} />
</View >}
</ScrollView>
Test1 and Test2 are two independent list components
I have the following piece of React code on my website that shows the search results div only if the search results exist. The backend limits search results to only 20 items at a time, and each item is a dictionary with only three key-value pairs.
This works perfectly on all desktop browsers and also Firefox on Android. But on Android Chrome the search results never show. I've tried changing the display to always block, letting the height and width be undefined, and tons of different formatting changes.
Is there something related to div height or data displayed for mobile Chrome? Has anyone encountered this?
<div
style={{
height: 150,
width: "100%",
overflowY: "scroll",
display: this.props.hasSearchResults ? "" : "None"
}}
>
{/* switch to a div */}
{/* <List> */}
{this.props.search_results.map((result, idx) => (
<div>
<IconButton
size="small"
edge="end"
onClick={event => {
this.handleMenuAdd(event, result);
}}
style={{height: "100%"}}
>
<AddIcon
style={{margin: "auto"}}
fontSize="small"
/>
</IconButton>
<Typography
style={{verticalAlign: "bottom"}}
noWrap={true}
// display="block"
variant="caption"
>
{result.name}
</Typography>
<Typography
variant="caption"
style={{marginLeft: 10}}
noWrap={true}
>
{result.item_type}
</Typography>
</div>
))}
</div>
Thank you all for your attention and input. The problem was serverside. It simply wasn't lowercasing the search query. In Chrome the input was being automatically capitalized and in Firefox it wasn't. Feeling silly but will leave this here in case someone else needs to see it.
How do I store an image in my assets folder and render it on my NavBar?
It works fine when done locally but there are difficulties when doing the same through the web via GitHub Pages.
import * as React from 'react';
import { AppBar, Toolbar, Typography } from '#material-ui/core/';
class NavBar extends React.Component {
public render() {
return (
<div className='navbar'>
<AppBar position='static' color="inherit" >
<Toolbar style={{ paddingLeft: '1em', paddingRight: '1em' }}>
<img className="navbar-logo-favicon" src="../some_logo.png" height="35" width="35" />
<Typography variant='title' color='default'>
Project C
</Typography>
</Toolbar>
</AppBar>
</div>
)
}
}
export default NavBar
What would be the standard way to solve this issue?
I have searched extensively on google and stack overflow. Most of the solutions were bad path or case-sensitive faults, which seems to be not the case.
were bad path
You do have a bad path. Ensure that when developing locally ../some_logo.png is consitent with what is deployed in public
Example
If locally you are serving up public folder and it works (/img/some_logo is valid):
project
src
public
img
some_logo
On github pages public should be available at something.github.io/ (so that /img/some_logo is still valid)
I have the following CardContent in my React Material-UI
<CardContent className={classes.cardContent}>
<Typography component="p" className={classes.title} variant="title">
{this.props.post.title}
</Typography>
{this.props.post.photo &&
(<div className={classes.photo}>
<img
className={classes.media}
src={'/api/posts/photo/'+this.props.post._id}
/>
</div>)}
<pre>
<Typography component="p" className={classes.text}>
{this.props.post.text}
</Typography>
</pre>
</CardContent>
My problem is that if I have long string in {this.props.post.text} the text does not wrap to stay within the bounds of the card. Instead it gets truncated at the edge of the card.
How can I get this to wrap instead?
In my case I did not use <pre>I did go around with whiteSpace:'pre-wrap'
<Typography variant="body1" component="div" style={{whiteSpace:'pre-wrap'}} dangerouslySetInnerHTML={createMarkup(this.state.formData.About)} />
The problem here is that <pre> maitains the initial formatting of the string, so if it was one long line, it will remain that way when it is rendered. In this case the line was longer than the width of the card.