10 examples of 'img tag react' in JavaScript

3
export default function Img(props) {
4
  const {src, ...rest} = props
5
  const replacedSrc = src.replace('http://', 'https://')
6
  return (
7
    <div className="image-wrapper">
8
      <style jsx={true}>{`
9
        .image-wrapper {
10
          @p: .justifyCenter, .flex, .itemsCenter;
11
          @p: .mt25, .mb38;
12
        }
13
        img {
14
          max-width: 100%;
15
        }
16
        @media (max-width: 1050px) {
17
          div.image-wrapper {
18
            max-width: 100vw;
19
            margin-left: -38px;
20
            width: calc(100% + 76px);
21
          }
22
        }
23
      `}</style>
24
      <img src={replacedSrc} {...rest} />
25
    </div>
26
  )
27
}

78
value: function renderImg() {
79
  if (!this.props.image) return null;
80
  var imageAdditionalStyle = this.props.imageStyle ? this.props.imageStyle : {};
81
  return _react2.default.createElement('img', {
82
    src: '/assets/' + this.props.image,
83
    style: _extends({
84
      width: '200px',
85
      marginTop: '20px',
86
      marginBottom: '-20px'
87
    }, imageAdditionalStyle)
88
  });
89
}

22
render( props, {error} ) {
23
	// If you have no src, but have a failsrc
24
	if ( !props.src && props.failsrc ) {
25
		props.src = props.failsrc;
26
	}
27
28
	// if your URL begins with a triple slash, append the static endpoint
29
	if ( props.src && props.src.indexOf('///') === 0 ) {
30
		props.src = STATIC_ENDPOINT + props.src.substr(2);
31
	}
32
	if ( props.failsrc && props.failsrc.indexOf('///') === 0 ) {
33
		props.failsrc = STATIC_ENDPOINT + props.failsrc.substr(2);
34
	}
35
36
	if ( error ) {
37
		props.src = props.failsrc;
38
		return (
39
			<img {...props} />
40
		);
41
	}
42
	else {
43
		return (
44
			<img {...props} onerror={this.onError} />
45
		);
46
	}
47
}

158
function addImage(props) {
159
	if(glcConfig.isStandalone) {
160
		var image = document.createElement("img");
161
		image.src = props.url;
162
		props.image = image;
163
		return add(Shape.create(Image, props));
164
	}
165
	alert("The Image object is only supported in the standalone version of GLC.");
166
	return null;
167
}

101
function imgProps(props, mixins) {
102
	for (const mixin in mixins) {
103
		if (mixins[mixin] !== undefined && mixins[mixin] !== null) props[mixin] = mixins[mixin];
104
	}
105
	return props;
106
}

59
render() {
60
    return (h("img", { src: this.loadSrc, alt: this.alt, decoding: "async", onLoad: this.onLoad, onError: this.loadError }));
61
}

59
render() {
60
  return React.createElement(RawImage, this.props, this.props.children);
61
}

122
createImage(customProps, imageClasses) {
123
  const {
124
    src, alt, height, width,
125
  } = this.props;
126
  return (
127
    <img
128
      {...customProps}
129
      src={src}
130
      alt={alt}
131
      height={height}
132
      width={width}
133
      onLoad={this.handleOnLoad}
134
      onError={this.handleOnError}
135
      className={imageClasses}
136
      ref={this.ImageRef}
137
    />
138
  );
139
}

157
function loadImage(props, children, el) {
158
  let render;
159
  if (el) render = reactElement => React.render(reactElement, el);
160
  else render = TestUtils.renderIntoDocument;
161
162
  return new Promise((resolve, reject) => {
163
    const loader = render(
164
      <ImageLoader
165
        {...props}
166
        onLoad={() => { resolve(loader); }}
167
        onError={error => { reject(Object.assign(error, {loader})); }}>
168
        {children}
169
      </ImageLoader>
170
    );
171
  });
172
}

22
render ($$) {
23
  let el = super.render($$)
24
  el.addClass('sc-image')
25
  el.append(
26
    $$('img').attr({
27
      src: this.props.node.getUrl()
28
    }).ref('image')
29
  )
30
  return el
31
}