I get the path of the image displayed on my react app instead of the actual image and on my react-native app the images don't get displayed at all - node.js

Question

Question number 1: I've created a CRUD (CMS) app with react where you create articles. My backend is in node.js and my DB is in MySQL. I also have a react-native app that pulls all the articles I created on my CMS. Where do I store the images I add to my articles? In a folder in my backend? Or somewhere else?
Question number 2: So I've connected to my db and I'm displaying on my CMS react web page the title, content and image. And yet when it comes to the image, you can only see the path ie. (C:\fakepath\Screenshot 2020-06-14 at 23.07.52.png), not the actual image. I don't know if the issue is with my backend but after a bit of online research a lot of people said that you need to add require in the src if you want the actual image displayed and not just the path, a bit like this:
<img src={require('./logo.jpeg')} />
However with the way I've done it I don't see how I can use the img tag and add src because I'm fetching image to render from the backend and hence, not creating the img tag. Hope this makes sense.
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;
If the require is not what's missing do you have any other ideas of why this is happening?
I'm also pulling the same data for my react-native app and the images don't come up.
This is the code in my react-native app:
largeTitle={item.title} works fine and displays all the titles on the cards but source={item.image} doesn't display the images on the same cards.
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
}
});
This is my backend code in 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

For the first problem, getting the image uri from the server is good enough, and it's your react application that should handle converting that to a visible image.
One way to do this would be to change your renderArticles method like :
renderArticle = ({ id, title, image }) => (
<div key={id}>
{title}
<div
style={{
width: "100px",
height: "100px",
backgroundSize: "cover",
backgroundImage: "url(" + image + ")"
}}
></div>
</div>
);