How to use @plone/volto - 10 common examples

)}
      {data.url && (
        <>
          
            {data.url.split('/').slice(-1)[0]}
            {data.url.includes(settings.apiPath) && (
              <img alt="{alt}" src="{`${flattenToAppURL(data.url)}/@@images/image/mini`}">
            )}
            {!data.url.includes(settings.apiPath) &amp;&amp; (
              <img style="{{" alt="{alt}" src="{data.url}">
            )}
          
          
            {data.url.includes(settings.apiPath) &amp;&amp; (
               openObjectBrowser()}

{listingItems.map(item => (
            <div>
              
                {!item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="" src="{DefaultImageSVG}">
                )}
                {item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="{item.title}" src="{flattenToAppURL(">
                )}
                <div>
                  <h3>{item.title ? item.title : item.id}</h3></div></div>

}
                                        >
                                          
                                        
                                      
                                    
                                  )}
                                {item.url ? (
                                  <img alt="" src="{">
                                ) : (
                                  <div>
                                    
                                      {this.state.uploading &amp;&amp;
                                        this.state.currentSelectedCard ===
                                          index &amp;&amp; (
                                          
                                            
                                              Uploading image
                                            </div>

const View = ({ data }) => (
  <div>
    <div>
      {data.url &amp;&amp; (
        <img alt="" src="{`${flattenToAppURL(data.url)}/@@images/image`}">
      )}
      <div>
        {data.title &amp;&amp; <h1>{data.title}</h1>}
        {data.description &amp;&amp; <p>{data.description}</p>}
      </div>
    </div>
  </div>
);

{this.props.appendSecondaryActions && (
              <>{this.props.appendSecondaryActions}
            )}
          
        )}
        {this.props.selected &&
          !this.props.data.url &&
          this.props.appendSecondaryActions && (
            <div>{this.props.appendSecondaryActions}</div>
          )}
        {this.props.data.url ? (
          <p>
            <img alt="" src="{">
          </p>
        ) : (
          <div>
            
              
                {this.state.uploading &amp;&amp; (
                  
                    Uploading image
                  
                )}
                <center>
                  <img alt="" src="{imageTileSVG}"></center></div>

{(() => {
          const image = (
            <img alt="{data.alt" src="{">
          );
          if (data.external) {
            const isReallyExternal =
              (data.external.startsWith('http') ||
                data.external.startsWith('https')) &amp;&amp;
              !data.external.includes(settings.apiPath);

            if (isReallyExternal) {
              return (

{listingItems.map(item => (
            <div>
              
                {!item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="" src="{DefaultImageSVG}">
                )}
                {item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="{item.title}" src="{flattenToAppURL(">
                )}
                <div>
                  <h3>{item.title ? item.title : item.id}</h3>
                  <p>{item.description}</p>
                </div>
              
            </div>
          ))}

this.props.onChangeTile(this.props.tile, {
                    ...this.props.data,
                    url: '',
                  })
                }
              >
                
              
            
          
        )}
        <div>
          {this.props.data.url ? (
            <img alt="" src="{`${flattenToAppURL(this.props.data.url)}/@@images/image`}">
          ) : (
            <div>
              
                {this.state.uploading &amp;&amp; (
                  
                    Uploading image
                  
                )}
                <center>
                  <h4>Image</h4>
                  <p>Upload a new image</p>
                  <p>
                    <label>
                      Browse</label></p></center></div></div>

constructor(props) {
    super(props);
    this.search = this.search.bind(this);
    this.loadOptions = this.loadOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    this.state = {
      search: '',
      selectedOption: props.value
        ? props.value.map(item =>
            isObject(item)
              ? { label: item.title, value: item.token }
              : { label: item, value: item },
          )
        : [],
    };
  }

(state, props) => {
    const vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    const vocabState = state.vocabularies[vocabBaseUrl];
    if (vocabState) {
      return {
        vocabState,
        choices: vocabState.items,
        itemsTotal: vocabState.itemsTotal,
        loading: Boolean(vocabState.loading),
      };
    }
    return {};
  },
  { getVocabulary, getVocabularyTokenTitle },