Strange image behavior


#1

Hi, i have a strange behavior.
the pictures sometimes becomes all equals else if the file name is different.
when i click on the file name the pictures become right!
I’m not able to reproduce it in some example app…

can you verify??

this is my code glance

import React, { Component } from ‘react’;
import ‘./App.css’;
import Actionass from ‘./Actionass’;
import ATTENDERE from ‘./ATTENDERE’;
import Dispositivi from ‘./Dispositivi’;
import Modal from ‘react-responsive-modal’;
import {confirmAlert} from ‘react-confirm-alert’;
import {alasql} from ‘alasql’;
import {jspdf} from ‘jspdf’;
import ‘react-confirm-alert/src/react-confirm-alert.css’;
import {autotable} from ‘jspdf-autotable’;
import JsBarcode from ‘jsbarcode’;
import Canvas from ‘canvas’;
import Calendar from ‘tui-calendar’;
import ‘tui-calendar/dist/tui-calendar.css’;
import moment from ‘moment’;
import tingle from ‘tingle.js’;
import ‘tingle.js/dist/tingle.min.css’;
import {Toast, ToastModel, ToastCloseArgs} from ‘@syncfusion/ej2-notifications’;
import ‘@syncfusion/ej2-notifications/styles/material.css’;
import btn_icon_613773 from ‘./images/btn_icon_613773.png’;
import img_state0_elImage2246053 from ‘./images/AssociazioniScreen_state0_elImage2246053_246053.png’;
import img_state1_elImage7 from ‘./images/AssociazioniScreen_state1_elImage7_672794.png’;
import img_state1_elImage from ‘./images/AssociazioniScreen_state1_elImage_404618.png’;
import img_state1_elImage4 from ‘./images/AssociazioniScreen_state1_elImage4_743473.png’;
import img_state1_elImage5 from ‘./images/AssociazioniScreen_state1_elImage5_904483.jpg’;
import img_state1_elImage6 from ‘./images/AssociazioniScreen_state1_elImage6_418745.jpg’;
import img_state1_elImageCopy from ‘./images/AssociazioniScreen_state1_elImageCopy_672794.png’;
import img_state1_elImageCopy2 from ‘./images/AssociazioniScreen_state1_elImageCopy2_672794.png’;
import img_state1_elImageCopy3 from ‘./images/AssociazioniScreen_state1_elImageCopy2_672794.png’;
import img_state1_elImage2246053 from ‘./images/AssociazioniScreen_state0_elImage2246053_246053.png’;
import img_state2_elImage2246053 from ‘./images/AssociazioniScreen_state0_elImage2246053_246053.png’;

// UI framework component imports
import Appbar from ‘muicss/lib/react/appbar’;
import Input from ‘muicss/lib/react/input’;
import Button from ‘muicss/lib/react/button’;

export default class AssociazioniScreen extends Component {

// Properties used by this component:
// appActions, deviceInfo

constructor(props) {
super(props);

this.state = {
  state0_elActionass_stateIndex: 0,
  field: (this.props.appActions.dataSlots ? this.props.appActions.dataSlots['ds_descrizioneperiferica'] : '') || '',
};

}

componentDidMount() {
}

componentWillUnmount() {
}

componentDidUpdate() {
}

componentWillReceiveProps(nextProps) {
}

// — Functions for component state index 0 (1 of 3) —

onClick_state0_elButton2613773 = (ev) => {
// Go back in screen navigation history
this.props.appActions.goBack();

// Go back in screen navigation history
this.props.appActions.goBack();

}

renderState0() {
let layoutFlowStyle = {};
let baseStyle = {};
if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
}
if ( !this.props.atTopOfScreenStack) {
layoutFlowStyle.height = ‘100vh’;
layoutFlowStyle.overflow = ‘hidden’;
}

const dataSheet_periferiche = this.props.dataSheets['periferiche'];
const style_state0_elBackground644166 = {
  width: '100%',
  height: '100%',
 };
const style_state0_elBackground644166_outer = {
  backgroundColor: '#fdfefd',
 };
const style_state0_elList = {
  height: 'auto',  // This element is in scroll flow
 };

// Source items and any special components used for list/grid element 'list'.
let items_list = [];
let listComps_list = {};

// Show head item only if list is empty.
if (this.props.appActions.getDataSheet('periferiche').items.length < 1) {
  listComps_list['_head'] = <ATTENDERE appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />;  // Head item for this list
  items_list.push({key: '_head', _componentId: '_head'});  // A data item to indicate the head item
}

items_list = items_list.concat(this.props.appActions.getDataSheet('periferiche').items);

const style_state0_elRectangleCopy = {
  background: 'rgba(254, 255, 255, 1.000)',
 };
const style_state0_elDemoNonvisual512409 = {
  pointerEvents: 'auto',
 };
const style_state0_elButton2613773 = {
  display: 'block',
  textTransform: 'uppercase',
  backgroundImage: 'url('+btn_icon_613773+')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '46.585%',
  backgroundPosition: '50% 0%',
  color: '(null)',
  textAlign: 'left',
  backgroundColor: 'transparent',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state0_elImage2246053 = {
  backgroundImage: 'url('+img_state0_elImage2246053+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };

return (
  <div className="AppScreen AssociazioniScreen" style={baseStyle}>
    <div className="background">
      <div className="containerMinHeight state0_elBackground644166" style={style_state0_elBackground644166_outer}>
        <div style={style_state0_elBackground644166} />
      </div>
      
      <div className="hasNestedComps state0_elActionass">
        <Actionass visualStateIndex={this.state.state0_elActionass_stateIndex} ref={(el)=> this._state0_elActionass = el} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />
      </div>
    </div>
    
    <div className="layoutFlow" style={layoutFlowStyle}>
      <div className="hasNestedComps state0_elList">
        <ul style={style_state0_elList}>
          {items_list.map((row, index) => {
            let itemComp = (row._componentId)
                ? listComps_list[row._componentId]
                : <Dispositivi dataSheetId={'periferiche'} dataSheetRow={row} {...{ 'descrizione': row['descrizione'], 'tipo': row['tipo'], 'posizione': row['posizione'], 'concentratore': row['concentratore'], 'configurato': row['configurato'], 'rele': row['rele'], }} appActions={this.props.appActions} deviceInfo={this.props.deviceInfo} locStrings={this.props.locStrings} />;
            return (<li key={row.key}>
                {itemComp}
              </li>);
          })}
          <div className="marker" ref={(el)=> this._state0_elList_endMarker = el} />
        </ul>
      </div>
      
      <div className="state0_elRectangleCopy">
        <div style={style_state0_elRectangleCopy} />
      </div>
    </div>
    <Appbar className="navBar">
    </Appbar>
    
    <div className="screenFgContainer">
      <div className="foreground">
        <div className="state0_elDemoNonvisual512409" style={style_state0_elDemoNonvisual512409} />
        <button className="baseFont state0_elButton2613773" style={style_state0_elButton2613773} onClick={this.onClick_state0_elButton2613773}  />
        <div className="state0_elImage2246053" style={style_state0_elImage2246053} />
      </div>
    </div>
  </div>
)

}

// — Functions for component state index 1 (2 of 3) —

onClick_state1_elRectangle2 = (ev) => {
// Go to screen ‘BoxAlarm1’
this.props.appActions.goToScreen(‘boxalarm1’, { transitionId: ‘fadeIn’ });

}

onClick_state1_elRectangleCopy3 = (ev) => {
// Go to screen ‘Riob1’
this.props.appActions.goToScreen(‘riob1’, { transitionId: ‘fadeIn’ });

}

onClick_state1_elRectangleCopy4 = (ev) => {
// Go back in screen navigation history
this.props.appActions.goBack();

}

onClick_state1_elRectangleCopy5 = (ev) => {
// Go back in screen navigation history
this.props.appActions.goBack();

}

onClick_state1_elButton2613773 = (ev) => {
// Go back in screen navigation history
this.props.appActions.goBack();

// Go back in screen navigation history
this.props.appActions.goBack();

}

renderState1() {
let layoutFlowStyle = {};
let baseStyle = {};
if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
}
if ( !this.props.atTopOfScreenStack) {
layoutFlowStyle.height = ‘100vh’;
layoutFlowStyle.overflow = ‘hidden’;
}

const dataSheet_periferiche = this.props.dataSheets['periferiche'];
const style_state1_elBackground644166 = {
  width: '100%',
  height: '100%',
 };
const style_state1_elBackground644166_outer = {
  backgroundColor: '#fdfefd',
 };
const style_state1_elRectangle2 = {
  background: 'rgba(254, 255, 255, 1.000)',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state1_elRectangle2_outer = {
  boxShadow: '0.0px 2.3px 18px rgba(0, 0, 0, 0.1600)',
 };
const style_state1_elRectangle = {
  background: 'rgba(254, 255, 255, 1.000)',
 };
const style_state1_elRectangle_outer = {
  boxShadow: '0.0px 2.3px 18px rgba(0, 0, 0, 0.1600)',
 };
const style_state1_elImage7 = {
  backgroundImage: 'url('+img_state1_elImage7+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elImage = {
  backgroundImage: 'url('+img_state1_elImage+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elRectangleCopy3 = {
  background: 'rgba(254, 255, 255, 1.000)',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state1_elRectangleCopy3_outer = {
  boxShadow: '0.0px 2.3px 18px rgba(0, 0, 0, 0.1600)',
 };
const style_state1_elRectangleCopy4 = {
  background: 'rgba(254, 255, 255, 1.000)',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state1_elImage4 = {
  backgroundImage: 'url('+img_state1_elImage4+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elImage5 = {
  backgroundImage: 'url('+img_state1_elImage5+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elRectangleCopy5 = {
  background: 'rgba(254, 255, 255, 1.000)',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state1_elRectangleCopy5_outer = {
  boxShadow: '0.0px 2.3px 18px rgba(0, 0, 0, 0.1600)',
 };
const style_state1_elImage6 = {
  backgroundImage: 'url('+img_state1_elImage6+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elImageCopy = {
  backgroundImage: 'url('+img_state1_elImageCopy+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elImageCopy2 = {
  backgroundImage: 'url('+img_state1_elImageCopy2+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elImageCopy3 = {
  backgroundImage: 'url('+img_state1_elImageCopy3+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };
const style_state1_elDemoNonvisual512409 = {
  pointerEvents: 'auto',
 };
const style_state1_elButton2613773 = {
  display: 'block',
  textTransform: 'uppercase',
  backgroundImage: 'url('+btn_icon_613773+')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '46.585%',
  backgroundPosition: '50% 0%',
  color: '(null)',
  textAlign: 'left',
  backgroundColor: 'transparent',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state1_elImage2246053 = {
  backgroundImage: 'url('+img_state1_elImage2246053+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };

return (
  <div className="AppScreen AssociazioniScreen" style={baseStyle}>
    <div className="background">
      <div className="containerMinHeight state1_elBackground644166" style={style_state1_elBackground644166_outer}>
        <div style={style_state1_elBackground644166} />
      </div>
    </div>
    
    <div className="layoutFlow" style={layoutFlowStyle}>
      <div className="flowRow flowRow_AssociazioniScreen_state1_elRectangle2_323538">
      <div className="state1_elRectangle2" style={style_state1_elRectangle2_outer}>
        <div style={style_state1_elRectangle2} onClick={this.onClick_state1_elRectangle2}  />
      </div>
      
      <div className="state1_elRectangle" style={style_state1_elRectangle_outer}>
        <div style={style_state1_elRectangle} />
      </div>
      
      <div className="state1_elImage7">
        <div style={style_state1_elImage7} />
      </div>
      
      </div>
      <div className="state1_elImage">
        <div style={style_state1_elImage} />
      </div>
      
      <div className="flowRow flowRow_AssociazioniScreen_state1_elRectangleCopy3_924660">
      <div className="state1_elRectangleCopy3" style={style_state1_elRectangleCopy3_outer}>
        <div style={style_state1_elRectangleCopy3} onClick={this.onClick_state1_elRectangleCopy3}  />
      </div>
      
      <div className="state1_elRectangleCopy4">
        <div style={style_state1_elRectangleCopy4} onClick={this.onClick_state1_elRectangleCopy4}  />
      </div>
      
      </div>
      <div className="state1_elImage4">
        <div style={style_state1_elImage4} />
      </div>
      
      <div className="state1_elImage5">
        <div style={style_state1_elImage5} />
      </div>
      
      <div className="flowRow flowRow_AssociazioniScreen_state1_elRectangleCopy5_323538">
      <div className="state1_elRectangleCopy5" style={style_state1_elRectangleCopy5_outer}>
        <div style={style_state1_elRectangleCopy5} onClick={this.onClick_state1_elRectangleCopy5}  />
      </div>
      
      </div>
      <div className="state1_elImage6">
        <div style={style_state1_elImage6} />
      </div>
      
      <div className="flowRow flowRow_AssociazioniScreen_state1_elImageCopy_672794">
      <div className="state1_elImageCopy">
        <div style={style_state1_elImageCopy} />
      </div>
      
      <div className="state1_elImageCopy2">
        <div style={style_state1_elImageCopy2} />
      </div>
      
      <div className="state1_elImageCopy3">
        <div style={style_state1_elImageCopy3} />
      </div>
      
      </div>
    </div>
    <Appbar className="navBar">
    </Appbar>
    
    <div className="screenFgContainer">
      <div className="foreground">
        <div className="state1_elDemoNonvisual512409" style={style_state1_elDemoNonvisual512409} />
        <button className="baseFont state1_elButton2613773" style={style_state1_elButton2613773} onClick={this.onClick_state1_elButton2613773}  />
        <div className="state1_elImage2246053" style={style_state1_elImage2246053} />
      </div>
    </div>
  </div>
)

}

// — Functions for component state index 2 (3 of 3) —

textInputChanged_field = (event) => {
this.setState({field: event.target.value});
}

onClick_state2_elButton = (ev) => {
var rinomina;
var pp = this;

let descrizione = pp.state.field;
let concentratoreid = pp.props.ds_concentratoreselezionato;
let idutente = pp.props.ds_idUser;
let posizione = pp.props.ds_perifericainmodificaposizione;
let Imei = pp.props.ds_idtelefono;
let tipo = pp.props.ds_perifericainmodificatipo;
let tipodescr = pp.props.ds_descrizioneperiferica;
let rele = pp.props.ds_perifericainmodificarele;



var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'escape'],
    cssClass: ['custom-class-1', 'custom-class-2'],
    onOpen: function() {
        console.log('modal open');
    },
    onClose: function() {
        console.log('modal closed');
    },
    beforeClose: function() {
        // here's goes some logic
        // e.g. save content before closing the modal
        return true; // close the modal
        return false; // nothing happens
    }
});
modal.setContent('<h1>Confermi l\'operazione di rinomina?</h1>');

modal.addFooterBtn('Conferma', 'tingle-btn tingle-btn--default', function(){
        rinomina();
    });


   modal.addFooterBtn('Esci', 'tingle-btn tingle-btn--primary', function(){
        modal.close();
    });

  
modal.open();
function rinomina(){


  /*
CREATE TABLE "Periferiche"  (
  "id" INTEGER NOT NULL PRIMARY KEY,
  "concentratoreid" TEXT,
  "Descrizione" TEXT,
  "idUtente" TEXT,
  "posizione" TEXT,
  "SlaveSN" TEXT,
  "AllarmeBA" TEXT,
  "Imei" TEXT,
  "tipo" VARCHAR(255),
  "tipodescr" TEXT
  
  let descrizione = pp.state.field;
let concentratoreid = pp.props.ds_concentratoreselezionato;
let idutente = pp.props.ds_idUser;
let posizione = pp.props.ds_perifericainmodificaposizione;
let Imei = pp.props.ds_idtelefono;
let tipo = pp.props.ds_perifericainmodificatipo;
let tipodescr = pp.props.ds_descrizioneperiferica;

  .replace("'", "´")
)*/
 let passaggio;
  var ss;
var message = [];
var obj
  
const ws = new WebSocket('wss://archimedelops.it:1770/eseguisql');
// Add a listener that will be triggered when the WebSocket is ready to use
ws.addEventListener('open', () => {

 
   ss = "Delete from Periferiche where concentratoreid = '" + concentratoreid + "' and posizione = '" + posizione + "' "
  if (parseInt(tipo) == 2) {
  	ss += " and Rele = '"  + rele + "'"
  }
 obj = {
    'sql': encodeURI(ss)
}
message.push(obj);
  
  passaggio = "A";
  
  console.log('Sending:', message);
 
  ws.send(JSON.stringify(message));
  modal.close();
 
});
// Add a listener in order to process WebSocket messages received from the server

 
ws.addEventListener('message', event => {
  
  if (passaggio == "A") {
           ss = "Insert INTO Periferiche(concentratoreid,Descrizione,idUtente,posizione,SlaveSN,Imei,tipo,tipodescr, Rele) VALUES(";
          ss += "'" + concentratoreid + "','" + descrizione.replace("'", "´") + "','" + idutente  + "','" + posizione + "','N','" + Imei + "','" + tipo + "','" + tipodescr + "','" + rele + "'"
           ss += ");"
         message = [];
         obj = {
            'sql': encodeURI(ss)
        }
        message.push(obj);
     ws.send(JSON.stringify(message));
         passaggio = "B"; 
              // Clear internal state for data-providing elements in this component
            pp.setState({
              text: (<div></div>),
              text_plainText: "",
              field: "",
            });
              let newVal = "0";
            pp.props.appActions.updateDataSlot('ds_statoassociazioni', newVal);
	}
});


  
}

}

onClick_state2_elButton2613773 = (ev) => {
// Go back in screen navigation history
this.props.appActions.goBack();

// Go back in screen navigation history
this.props.appActions.goBack();

}

renderState2() {
let layoutFlowStyle = {};
let baseStyle = {};
if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
}
if ( !this.props.atTopOfScreenStack) {
layoutFlowStyle.height = ‘100vh’;
layoutFlowStyle.overflow = ‘hidden’;
}

const dataSheet_periferiche = this.props.dataSheets['periferiche'];
const style_state2_elBackground644166 = {
  width: '100%',
  height: '100%',
 };
const style_state2_elBackground644166_outer = {
  backgroundColor: '#fdfefd',
 };
const style_state2_elDemoNonvisual512409 = {
  pointerEvents: 'auto',
 };
const style_state2_elField = {
  display: 'block',
  backgroundColor: 'transparent',
  borderColor: 'transparent',
  pointerEvents: 'auto',
 };

const value_field = this.state.field;

const style_state2_elButton = {
  display: 'block',
  color: 'white',
  textAlign: 'center',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state2_elText = {
  fontSize: 15.2,
  color: 'rgba(0, 0, 0, 0.8500)',
  textAlign: 'left',
  textShadow: 'rgba(0, 0, 0, 0.3000) 0.0px 2.0px 4.5px',
 };
const style_state2_elButton2613773 = {
  display: 'block',
  textTransform: 'uppercase',
  backgroundImage: 'url('+btn_icon_613773+')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '46.585%',
  backgroundPosition: '50% 0%',
  color: '(null)',
  textAlign: 'left',
  backgroundColor: 'transparent',
  cursor: 'pointer',
  pointerEvents: 'auto',
 };
const style_state2_elImage2246053 = {
  backgroundImage: 'url('+img_state2_elImage2246053+')',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '50% 50%',
  backgroundSize: 'contain',
 };

return (
  <div className="AppScreen AssociazioniScreen" style={baseStyle}>
    <div className="background">
      <div className="containerMinHeight state2_elBackground644166" style={style_state2_elBackground644166_outer}>
        <div style={style_state2_elBackground644166} />
      </div>
    </div>
    <Appbar className="navBar">
    </Appbar>
    
    <div className="screenFgContainer">
      <div className="foreground">
        <div className="state2_elDemoNonvisual512409" style={style_state2_elDemoNonvisual512409} />
        <Input className="baseFont state2_elField" style={style_state2_elField} type="text" hint={this.props.locStrings.associazioni_field_1037380} onChange={this.textInputChanged_field} value={value_field !== undefined ? value_field : ''}  />
        <Button className="actionFont state2_elButton" style={style_state2_elButton}  color="primary" onClick={this.onClick_state2_elButton} >
          {this.props.locStrings.associazioni_button_875916}
        </Button>
        <div className="systemFontBold  state2_elText" style={style_state2_elText}>
          <div>{this.props.locStrings.associazioni_text_570262}</div>
        </div>
        <button className="baseFont state2_elButton2613773" style={style_state2_elButton2613773} onClick={this.onClick_state2_elButton2613773}  />
        <div className="state2_elImage2246053" style={style_state2_elImage2246053} />
      </div>
    </div>
  </div>
)

}

render() {
switch (parseInt((this.props.ds_statoassociazioni !== undefined) ? this.props.ds_statoassociazioni : 0, 10)) {
default:
case 0:
return this.renderState0();
case 1:
return this.renderState1();
case 2:
return this.renderState2();
}
}

}


#2

Antti,
this is a big problem for me
i must reload often all project images!


#3

Can you post the exact steps how and when this occurs. Maybe do screen recording video at the same time.


#4

One time is at the start of the program let me capture some screen


#5

Yeah, we need to see the exact steps and maybe even get the project file. Otherwise it’s pretty impossible to find out what causing this.


#6

antti,
where i can upload the video? some images are copyrigth protected and i can not make public
it is 70mb
do you have gmail address so i can share my google drive link?


#7

do you want connect with my mac with anydesk?


#8

just share the video link to hello@neonto.com


#9

done!
sent email with links


#10

Hi Paolo, unfortunately we aren’t able to catch the error with the available information. Would you be able to send us an example project where the issue is present?


#11

juha,
would you connect to my mac with anydesk to test it?


#12

I’m not sure that would help much since I’d need to run React Studio in debug mode to know what’s happening “under the hood”.

Do you know which steps led to that situation? We tried with a new project, created few image elements and fiddled with the settings but didn’t notice any problems. What we could be missing here? Are the images wrongs also when you run the project in browser?


#13

please see if you have my email with files and project


#14

It seems that the issue was caused by a bug in our copy&paste implementation. Duplicate (cmd+d) seems to work correctly which can be used as a workaround until we release an update. So you need to create new image elements to ‘comp 2’ -component (without using copy and paste -actions) to make it work.


#15

tank you for your support.
i like your react studio!