Details Pop Up Task#266 UI can handle images using URLs and machines without images #266

UI can handle images using URLs and machines without images #266

For this task, we use this component:

• MachinesDetailsForm.js

The main goal of this task, was to make sure, that the Pop-can handle images that have hyperlinks, and in case of absence of the given hyperlink, the Pop-up can use a substitute image.

If an image is present, its hyperlink is being passed from the JSON file into Details Pop-up, and the image is being rendered there. In case of the absence of the given hyperlink, the Pop-up will generate a substitute image. The hyperlink is being rendered in the details Pop-up window.

The problem with this task is associated with the way how the information about the absent images is being stored. In many cases instead of being null, it was stored differently. Here are some of the examples:

• null
• "null"
• ""
• " "

To verify that the field has a hyperlink, I decided to use the includes() function, which verifies, if the field has a hyperlink.

Conditional statement

To verify if the field has a hyperlink, I created a conditional statement.

      {this.state.productInDetails.ModelPhoto===" " || 
      this.state.productInDetails.ModelPhoto===null ||
      this.state.productInDetails.ModelPhoto==="null"||
      this.state.productInDetails.ModelPhoto===" null"||
      this.state.productInDetails.ModelPhoto.includes("http")===false
      ? <img style={{width:400}} alt = "" src="Subsitute image link"/>
      : <img style={{width:400}} alt = "" src={this.state.productInDetails.ModelPhoto} />}