score:7

Accepted answer

Tach, der Herr.

Though I haven't fiddled around with the "native" version of React, yet, I have two spontaneous ideas on how to tackle this issue.

I. Keep the images in the built app

If you know the amount of topics/images you're dealing with, you can simple require them all and store them in an object whose property-names reflect your topic names.

var imgTopic1 = require('image!topic1');
var imgTopic2 = require('image!topic2');
…

var topicImages = {
    topic1: imgTopic1,
    topic2: imgTopic2,
    …
};

return (<Image src={topicImages[topic]} … />);

II. Use an external resource

If you want to be able to add more topics/images without having to release an upgrade of the app, you can use an external image-service and construct the URL from the topic.

var imgServiceRoot = 'http://example.com/images/';
var imgUrl = imgServiceRoot + topic + '.jpg';

return (<Image src={{uri: topicImages[topic]}} … />);

Have I forgot something?


Related Query

More Query from same tag