我得到了显示在我的反应应用程序而不是实际图像上的图像路径，并且在我的反应本机应用程序上，图像根本没有显示

Question

问题 1：我已经创建了一个 CRUD (CMS) 应用，它可以在您创建文章的地方做出反应。我的后端在 node.js 中，我的数据库在 MySQL 中。我还有一个 react-native 应用程序，它可以提取我在 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 不是缺少的东西，您对为什么会发生这种情况还有其他想法吗？ 我也在为我的 react-native 应用程序提取相同的数据，但图像没有出现。

这是我的 react-native 应用程序中的代码： 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'), (req, res) => {

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

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

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

Answer 1

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

  renderArticle = ({ id, title, image }) => (
<div key={id}>
  {title}
  <div
    style={{
      width: "100px",
      height: "100px",
      backgroundSize: "cover",
      backgroundImage: "url(" + image + ")"
    }}
  ></div>
</div>

);