CODEWITHSUNDEEP
reactjs
stian
stian

Reputation: 1987

how to set the image position with JSX/HTML5?

this is a very easy question, but I can not decide what is the cleanest nor actually to get it to work. I have this JSX-part in a reactJS class, and would like to set position dynamically through a prop-value. Which tag attribute should I add to the following code snippet? I have seen examples with style and tried setting left and right etc without any success.

Any help is appreciated.

<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />

Upvotes: 6

Views: 37571

Answers (3)

Sandeep
Sandeep

Reputation: 1

In JSX ES6 an image needs to be imported before using it in component, or use src tag with require followed by image path within round braces all within curly braces. you can set image property by using style tag followed by double curly braces. Don't need to give double or single inverted commas.

your image component might look something like this:

<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: 200, height: 200 }} />

You can also use props or state value to define image properties in between style tag. Don't forgot to set state value before using this. You can set state values directly through props or through function.

This looks something like this (using through state values):

<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.state.width, height: this.state.height }} />

OR looks something like this (directly through props):

<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.props.width, height: this.props.height }} />

Upvotes: 0

markthethomas
markthethomas

Reputation: 4441

JSX is a prepocessor syntax that will essentially create a bunch of React.createElement function calls with the right elements/components passed in to the different calls. So instead of doing React.createElement('div', props, children) for every container/component/piece of markup you want to create. The upside is that you can return component markup that's easy to read and understand but feels more familiar and easy to write than a ton of nested function calls.

There are a few key differences between regular HTML and JSX, though. Most of them stem from the clashes w/ JavaScript reserved words:

  • some attributes are camelCased and named slightly differently, like htmlFor (as opposed to for)
  • style gets passed in to the style property as an object via an outer JSX expression {{}}
  • most css names are different if they use a hyphen, but most just get camelCased. So: marginLeft, paddingRight, and so on
  • you can pass in style props just like you'd pass other props; they just go right into the style object you create for the component/element.
  • custom attributes (created with a hyphen) won't get rendered except for those that follow the aria spec (aria-, etc.)

So, taking that into consideration, your image component might look something like this:

<img onClick={this.handleKeyPress} 
   src="/image/1" 
   alt="HTML5" 
   style={{width: 200, height: 200, position: 'absolute', top: this.props.top, left: this.props.left}}/>

See also:

Upvotes: 14

Brian Shotola
Brian Shotola

Reputation: 472

Make sure you use the double curly braces on style or use a class:

<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" style={{width:"200", height:"200"}} />
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" className="foo" />

Upvotes: 3

Related Questions