Question

我正在制作expo应用程序，并且我有一个数据库，其中包含有关关节的所有信息。我正在显示所有信息，直到那一刻我想在图像链接中显示变量时，一切都还好。我尝试将其与require，source，uri一起使用，但是它没有用。我如何在图像链接中显示变量。请帮助我。

#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <SoftwareSerial.h>
#include <String.h>
SoftwareSerial fromUno(D5,D6); // (Rx, Tx)

char* ssid = "B";
char* password =  "A";
const char* mqttServer = "Z";
const int mqttPort = 1;
const char* mqttUser = "Y";
const char* mqttPassword = "X;

WiFiClient espClient;
PubSubClient client(espClient);

void setup() {

  Serial.begin(9600);
  fromUno.begin(115200);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("Connecting to WiFi..");
  }

  Serial.println("Connected to the WiFi network");

  client.setServer(mqttServer, mqttPort);

  while (!client.connected()) {
    Serial.println("Connecting to MQTT...");

    if (client.connect("ESP32Client", mqttUser, mqttPassword )) {

      Serial.println("connected");

    } else {

      Serial.print("failed with state ");
      Serial.print(client.state());
      delay(2000);

    }
  }
}

void loop() {
   char json[100];
   json[0] = fromUno.read();
   String json2 = "{\"planta\":{\"umidade\":200,\"criticidade\":1}}";

  Serial.println("Sending message to MQTT topic..");

  if (client.publish("test", json2) == true) {
    Serial.println("Success sending message");
  } else {
    Serial.println("Error sending message");
  }

  client.loop();
  Serial.println("-------------");

  delay(10000);
}

Answer 1

由于我不知道您在<Image />中使用什么组件，因此它是直接应用于图片的网址：

<img src={rowData.article_image} />

Answer 2

添加从中获取图像的路径。您可以在渲染器中添加这样的内容

let article_image
article_image = `/assets/uploads/${this.state.article_image}`;

作为回报

<img src={article_image} className="img-responsive" alt="Some Fancy Example 
Image" />

Answer 3

React Native和Expo故意阻止您在需要文件（包括图片，声音和其他Javascript文件）时使用变量或除静态不变字符串以外的任何内容，无论您如何要求（通过源，要求，或uri）。

也请在同一页上阅读此评论以获取更好的解释：https://github.com/facebook/react-native/issues/2481#issuecomment-137982505

以下解决方案来自Expo文档（https://docs.expo.io/versions/latest/react-native/images/）：

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
    ? require('./my-icon-active.png')
    : require('./my-icon-inactive.png');
<Image source={icon} />;

最后一个好的部分是唯一的方法。一个简单的if语句。如果this.props.active === true，则使用第一个需求；如果为false，则使用第二个需求。

Answer 4

您缺少图片样式，如果未设置width和height，则不会显示图片

<Image
  style={{width: 50, height: 50}}
  source={{uri:rowData.article_image}}/>

图片链接中的变量

4 个答案: