React Native - Create uri for an image with a variable

Question

Question #1:

How to create a uri with a link and a variable? My example is from an API.

<Image source={{uri: 'http://www.mypage.com/'+`${val.images.filename}`}}  style={styles.imgProd} />

Question #2:

I would also like to know how to build the uri with a function like something like this.

makeImgUrl(value) {
    if (value === '' || valueUrl === 'null') {
        return ("http://www.mypage.com/defaultimg.jpg")
    } else {
        return ("http://www.mypage.com/"+${value})
    }
}

<Image source={{uri: +makeImageUrl(val.images.filename)}}  style={styles.imgProd} />

Isaac · Accepted Answer · 2018-08-23 12:47:24Z

1

You are using the string interpolation wrongly.

let name = 'John';

console.log('Hi! I am ' + name); //ES5

console.log(`Hi! I am ${name}`)

As shown above, either we go for ES5 way, which we don't use backtick at all, or we opt for ES6 way, remove the single-quote/double-quote and replace with backtick.

So apply whatever I said onto your scenario, it would be as below

<Image source={{uri: 
`http://www.mypage.com/${val.images.filename}`}}  style={styles.imgProd} />

or

<Image source={{uri: 
'http://www.mypage.com/' + val.images.filename}}  style={styles.imgProd} />

answered Aug 23, 2018 at 12:47

Isaac

13k18 gold badges66 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kirankumar Dafda · Accepted Answer · 2018-08-23 12:19:16Z

0

You can simply add variable with url concating with + like below :

<Image source={{uri: 'http://www.mypage.com/'+val.images.filename}}  style={styles.imgProd}/>

OR call function like :

function makeImgUrl(value) {
    if (value === '' || valueUrl === 'null') {
        return "http://www.mypage.com/defaultimg.jpg"
    } else {
        return "http://www.mypage.com/"+value
    }
}

<Image source={{ uri: makeImageUrl(val.images.filename) }}  style={styles.imgProd} />

answered Aug 23, 2018 at 12:19

Kirankumar Dafda

2,3845 gold badges32 silver badges59 bronze badges

Collectives™ on Stack Overflow

React Native - Create uri for an image with a variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related