我得到了显示在我的react应用程序上的图像的路径，而不是实际图像，而在我的react-native应用程序上，这些图像根本不显示

如何解决我得到了显示在我的react应用程序上的图像的路径，而不是实际图像，而在我的react-native应用程序上，这些图像根本不显示

问题1：我创建了一个CRUD（CMS）应用程序，并在您创建文章的地方进行了反应。我的后端在node.js中，我的数据库在MySQL中。我也有一个本机应用程序，可以提取我在CMS上创建的所有文章。如何将添加到文章中的图像存储在哪里？在我后端的文件夹中？还是其他地方？

问题2：因此，我已经连接到数据库，并在CMS反应网页上显示标题，内容和图像。但是，当涉及到图像时，您只能看到路径即。 （C:\fakepath\Screenshot 2020-06-14 at 23.07.52.png），而不是实际图像。我不知道问题是否出在我的后端上，但是经过一些在线研究之后，很多人说，如果要显示实际图像而不是仅显示路径，则需要在src中添加require，有点像这样：

<img src={require('./logo.jpeg')} /> 

但是我做的方式却看不到如何使用img tag并添加src，因为我正在从后端获取image进行渲染，因此，不创建img标签。希望这有道理。

ViewAllArticles.js

class ViewAllArticles extends Component {
    state = {
        articles: []
      }

      getArticles = _ => {
        fetch('http://localhost:4000/articles')
        .then(response => response.json())
        .then(response => this.setState({ articles: response.data }))
          .catch(err => console.error(err))
        }

      componentDidMount() {
        this.getArticles();
      }

      renderArticle = ({ id,title,image }) => <div key={id}>{title},{image}</div>

  render() {
    const { articles } = this.state;
    return (
      <div>
        <h1>Home</h1>
        <div>
        {articles.map(this.renderArticle)}
        </div>
      </div>
    );
  }
}

export default ViewAllArticles;

如果没有require，您是否有其他想法知道为什么会这样？ 我还为我的本地应用程序提取了相同的数据，但图像没有显示出来。

这是我的本机应用程序中的代码： largeTitle={item.title}可以正常工作并在卡片上显示所有标题，但是source={item.image}不能在同一张卡片上显示图像。

HomeFeed.js

import React,{ Component } from "react";
import { StyleSheet,Text,View,FlatList } from 'react-native';
import {AppleCard,AppOfTheDayCard} from 'react-native-apple-card-views';

export default class HomeFeed extends Component {
constructor() {
  super()
  this.state = {
    dataSource: []
  }
}

// https://github.com/WrathChaos/react-native-apple-card-views
renderItem = ({ item }) => {
  return (
    <View>
    <View style={styles.card}>
    <AppleCard
    largeTitle={item.title}
    footnoteText="subtitle placeholder"
    source={item.image}
    >
    </AppleCard>
      </View>
    </View>
  )
}

componentDidMount() {
  const url = 'http://localhost:4000/articles'
  fetch(url)
  .then((response) => response.json())
  .then((responseJson) => {
this.setState({
  dataSource: responseJson.data
})
  })
}

  render() {
return(
    <View style={styles.homeFeed}>
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
      />
      
    </View>
);
  }

}
const styles = StyleSheet.create({
  homeFeed: {
    flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center'
  },card: {
    padding: 15
  }
  
});

这是我在node.js中的后端代码

index.js

const express = require('express');
const cors = require('cors');
const mysql = require('mysql');
const { query } = require('express');

const multer = require('multer');
const upload = multer({dest: 'public/images'}); // uploaded article image here

const app = express();

//all queries go here
const SELECT_ALL_ARTICLES_QUERY = 'SELECT * FROM articles';


//create connection
const connection = mysql.createConnection({
    host: 'localhost',user: 'root',password: 'DidiLydiBibi96',database: 'myTherapy'
});

connection.connect(err => {
    if(err) {
        return err;
    }
});
//end of creating connection

app.use(cors());

app.get('/',(req,res) => {
    res.send('go to /articles to see articles')
});

//ROUTES

//Add new article
app.use('/image',express.static('public/images'));
app.get('/articles/add',upload.single('image'),res) => {

const { title,content,image } = req.query; //fields from db
const INSERT_ARTICLES_QUERY = `INSERT INTO articles (title,image) VALUES(?,?,?)`;
connection.query(INSERT_ARTICLES_QUERY,[title,image],(err,results) => {
    if(err) {
        return res.send(err)
    }
    else {
        return res.send('successfully added article')
    }
});
});

//View all articles
app.get('/articles',res) => {
    connection.query(SELECT_ALL_ARTICLES_QUERY,results) => {
        if(err) {
            return res.send(err)
        }
        else {
            return res.json({
                data: results
            })
        }
            });
});

app.listen(4000,() => {
    console.log('Articles server listening on port 4000')
});

解决方法

对于第一个问题，从服务器获取图像uri足够好，并且应由您的react应用程序处理将其转换为可见图像。 一种方法是更改​​您的renderArticles方法，例如：

Please input a string of text: we have at least one byte
full string was 'we have at least one byte'

1  we

2  have

3  at

4  least

5  one

6  byte

6 words at the end of the loop:

1  we
2  have
3  at
4  least
5  one
6  byte

）;