React native fetch image location data from local database error unexpected token ","-CodePudding

I try to fetch some image loc from my local database, while I try to show it as a text it works perfectly fine but when I try to pass it on it gives me an error

const Products = () => {

const ProductCard = ({data}) => {
        <TouchableOpacity>
            <View>
             <Image source={require({data.productImage})} />
            </View>
        </TouchableOpacity>
}

return (
<View>
<View style={{
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
}}>
  <Text>Filter by</Text>
  <Text>Sort by</Text>
</View>
<View style={{width: '100%',}}>
      {productData.map(item => {
          return <ProductCard data={item} key={item.productSKU} />
      })}
  </View>
</View>

and here is my product data

export const productData = [{
"productSKU": 1,
"productSize": "M",
"productColor": "pink",
"productImage": "'../assets/images/productimage/product1.jpg'",
"productDesc": "It's a nice blue dress.",
"productPrice": 150,
"productName": "LIANA"

it doesn't matter if I use "'../assets/images/productimage/product1.jpg'" or '../assets/images/productimage/product1.jpg' it still gives me an error

The error it give is unexpected token "," which it needs to change data.productImage to data,productImage which it obviously wrong

CodePudding user response：

You can't use require function to render image in this situation, normally in react-native expo app you have write down assets in app.json file to use it with require function.

Include your assest in app.json file like this:

    "assetBundlePatterns": [
      "**/*",
      "assests/*"
    ],

Or without using assets you can use {uri:"link"} method in your situation.

<Image source={{uri: "link"}} />