I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
Related
I typed <img src= {'https://robohash.org/${id}?size=300x300'}alt="photo" /> on my React js file,
after I saved the file and I got an error message on GitBash saying ,
Redundant alt attribute. Screen-readers already announce 'img' tags as an image. You don’t need to use the words 'image', 'photo,' or 'picture' (or any specified custom words) in the alt prop jsx-a11y/img-redundant-alt
Then I removed the alt from the code, and I got the error message saying,
img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
How can I fix this problem?
<img src= {'https://robohash.org/${id}?size=300x300'}alt="something" />
'something' diffrent from the words 'photo' and 'image' (or any specified custom words).
I tried this one and it worked:
<input type="image" img src = {'https://robohash.org/${id}?size=300x300'} alt="photo" />
(I have used `` not the single quotation marks for the url)
I have same error issues in my react app. You can try this following codes.
❌ not work
<img src={`https://robohash.org/${id}?size=300x300`} alt="photo" />
It's also not work.
<img src={`https://robohash.org/${id}?size=300x300`} alt="Photo by John Doe" />
Don't use alt that contain keywords : photo, image, or picture.
✅ work
For example: (change alt tag with some image description without keyword)
<img src={`https://robohash.org/${id}?size=300x300`} alt="cutest kitten" />
Maybe, empty alt is alternative option.
✅ work
<img src={`https://robohash.org/${id}?size=300x300`} alt="" />
Thanks.
it's actually saying that inside your alt you don't need to use words like image, photo, or picture.
Example:
instead of
<img src="#" alt="photo"/>
try this :
<img src="#" alt="souvenir"/>
I put souvenir as an alt but you can choose any others words that describe well your image
Declare one keyword like
let alText = 'photo'
and use
<img src= {'https://robohash.org/${id}?size=300x300'} alt={alText} />
From this to
<img className="card-img" src={'https://www.shutterstock.com/'} alt="Card image" />
This->
<img className="card-img" src={'https://www.shutterstock.com/'} alt="" />
Here we have to change the alt tag value other than image, photo or picture
Try this:
Change alt="photo" to alt={"photo"}
Example:
<img src="{picture}" alt={"Card Image"}>
I am using React Bootstrap Typeahead to navigate through an array of tree data. Each tree has an id that I need to access, but I don't want that to be the labelKey.
I've tried tying into onFocus, but the menu items never seem to gain it. onClick works fine, but I need to support keyboard navigation, too. Adding onKeyPress to the menu items doesn't seem to do anything.
Any help is appreciated. Thanks in advance.
Here is the relevant code:
<Typeahead
filterBy={filterByFields}
id='typeahead-search'
labelKey={(option) => `${option.scientific_name}`}
onInputChange={this.startSearch} // fills props.suggestions
options={this.props.suggestions ? this.props.suggestions : []}
placeholder="Enter a tree name"
renderMenuItemChildren={(option) => (
<div
<!--this is the data I need -->
data-tree-id={option.tree_id}
onClick={this.dropdownClickHandler}
>
<div>
<span>
{option.scientific_name}
</span>
</div>
<small>
<span>
{option.common_name}
</span>
</small>
</div>
)}
/>
I would like to build a salesforce component where user will provide image link & the component will display the image. So I tried following code
lightning component
<aura:component implements="flexipage:availableForAllPageTypes" access="global"
controller="MyController" >
<lightning:card title="Partner Information">
<Div>
<p><lightning:input aura:name="image" label ="Enter image url" type="text"/></p>
<br></br>
<img url="{!image}" />
</Div>
</lightning:card>
</aura:component>
But it's not displaying the image after inserting the image url
I also tried with the option
<img url="{!v.image}" />
but I got the error message Access Check Failed! AttributeSet.get(): attribute 'image' of component
Can you guide me to display the image?
So the proper way to handle this would be by using the aura:html component. There are a few parameters you would set for this:
aura:id- String- your id to locate the elements within JS
tag- String- the html tag
HTMLAttributes- Map- No need to set this explicitly on the .cmp, we'll use Js
<!--YourComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
<!--Remember to define your binding attribute-->
<aura:attribute name="image" type="String"/>
<lightning:card title="Partner Information">
<div class="slds-p-around_medium">
<p>
<!--Set you attribute as the value of the lightning:input component-->
<lightning:input aura:name="image"
label ="Enter image url"
value="{!v.image}"
type="text"
onchange="{!c.handleUrlChange}"/>
</p>
<br/>
<!--Set the aura:id so you can access it in js, use component.find to locate-->
<aura:html aura:id="imgDiv" tag="img"/>
</div>
</lightning:card>
</aura:component>
//YourComponentController.js
({
handleUrlChange : function(component, event, helper) {
//Grab the value from the attribute or you can use event.getParam("value");
var imageUrl = component.get("v.image");
//Define the map, find the img tag generated by aura:html,
//and set the HTMLAttributes to your map
var newMapAttributes = {"src": imageUrl};
component.find("imgDiv").set("v.HTMLAttributes",newMapAttributes);
}
})
You are also using the url attribute on your image tag instead of the src attribute. You may be able to directly bind to the img element, but aura:html works really well. Hope that answers your question!
I need make image tag clickable, but I get a warning by jsx-a11y, how do I fixed it, I already read no-noninteractive-element-interactions, but I do not wanna wrap other div tag around img tag, because it will make a redundancy tag, so does any other way to fix this warning?
The warning is [eslint] Non-interactive elements should not be assigned interactive roles.
and my code is
<img
styleName="pic-id-code"
src={picCodeImgSrc}
alt="pic id code"
onClick={this.refreshPicCodeImg}
onKeyPress={this.handleKeyPress}
role="button"
tabIndex="0"
/>
You should use <input type="image" /> for your use case, it is semantically correct and you won't need to add role or tabindex or any other ARIA tags to make it work and accessible.
There is a caveat as this doesn't actually return to normal state after click and remains focused so you need to call blur after your onClick logic. Here's the simple demo I made few days back to remove focus on click.
You can disable eslint for a specify line like this
// eslint-disable-next-line THE-RULE-HERE
<img
styleName="pic-id-code"
src={picCodeImgSrc}
alt="pic id code"
onClick={this.refreshPicCodeImg}
onKeyPress={this.handleKeyPress}
role="button"
tabIndex="0"
/>
Not sure what exactly your rule is but try this
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
or
// eslint-disable-next-line no-noninteractive-element-interactions
Update after OP comment
... but no work in react jsx
Try this
<img
styleName="pic-id-code"
src={picCodeImgSrc}
alt="pic id code"
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
onClick={this.refreshPicCodeImg}
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
onKeyPress={this.handleKeyPress}
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
role="button"
tabIndex="0"
/>
onClick and oneKeyPress on img will also trigger warnings.
I am new to react and could not grasp the concept between bsClass and className.
I try to implement a modified button style, like:
<Button bsClass="btn-custom" >Custom button</Button>
where it does not work when I substitute bsClass with className.
But in other part, using the same custom.css source, I implement:
<img src={logo} alt="logo" className="app-logo" /> and it works.
JSX attribute className is equivalent of HTML class. So the below JSX
<span className="app-logo">Logo</span>
will be equivalent to the below in HTML
<span class="app-logo">Logo</span>
As per bsClass is considered in
<Button bsClass="btn-custom" >Custom button</Button>
it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like
<button className={this.props.bsClass}>{this.props.children}</button>
So it an attribute that is defined as a property by the react-bootstrap docs.
React's className is exactly equivalent to regular classes in CSS.
HTML/CSS:
<div class='red-text'>
Foo
</div>
React/JSX:
<div className='red-text'>
Foo
</div>
The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.
As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.
A practical difference. I you set bsClass to something other than what REACT-Bootstrap has as a default, you have to do your own css themeing of the button.
By adding a className="xx" you still get the default theme, but you can now add css styles for color, padding, etc, using your own .css
.xx {
magin-bottom: 2px
}