Require file or image dynamically in require method - image

I am using reactnative for mobile application and got an issue
I have json file which i am requiring in js file.
In json file there is also lots of image path.
When I am requiring json file from a folder in my js file
then path will be changed for that images which is in json file,
and I am also not able to pass the dynamic string in require method.
Here is my code in JSON file:
{
"Industry": [
{
"Id": "1",
"UpperImg": "../../../uploads/bposervices/industry/Bankingimg.png",
"FiledName": "Financial Services",
"FileName": "FS.json",
"Url" :"uploads/json/FS.json"
},
{
"Id": "2",
"UpperImg": "../../../uploads/bposervices/industry/Insimg.png",
"FiledName": "Insurance",
"FileName": "Insurance.json",
"Url" :"uploads/json/Insurance.json"
}
],
"Enterprises": [
{
"Id": "1",
"UpperImg": "uploads/bposervices/enterprise/Faimg.png",
"FiledName": "Finance & Accounting",
"FileName": "FandA.json",
"Url" :"uploads/json/FandA.json"
},
{
"Id": "2",
"UpperImg": "uploads/bposervices/enterprise/Spimg.png",
"FiledName": "Sourcing & Procurement",
"FileName": "SandP.json",
"Url" :"uploads/json/SandP.json"
}
]
}
Here is my js file:
const abc = require('../../folder/a.json)
class B extends component {
render() {
return (
<Container style={styles.container}>
<Content>
<List
dataArray={abc.industry} renderRow={dataIndustry =>
<ListItem>
<Card>
<CardItem cardBody>
<Image source={dataIndustry.UpperImg}/>
// or <Image source ={require(dataIndustry.UpperImg)/>
</CardItem>
<CardItem>
<Text>{dataIndustry.FiledName}</Text>
</CardItem>
</Card>
</ListItem>
}
/>
</Content>
</Container>
);
}
}
when I iterate the the array of object of json file,
I get the image path which I pass in require method,
but it is not accepting dynamic image path in require
method neither in image source.
Can anyone suggest me how can I get the same?

Related

How to display one bibliography in different styles according to the language which is used in the references using CSL and citeproc?

I would like to ask a question related to an ongoing issue in the GitHub repository of jgm/citeproc here, since my question may come to be out of scope of the original issue.
I'm trying to apply an approach proposed in a comment on the thread on GitHub to a csl file so that I can display English references and non-English ones (Chinese lang-zh, here) in different layouts according to their language. That is, when citeproc finds that a bib entry of a .bib file contains a csl's variable (say lang-zh), that bib entry is displayed in a layout that is specified in the csl's if-statement as shown below:
<citation>
...
<layout>
<choose>
<if variable="lang-zh">
<!--
Multibyte comma as a deliminater for non-English references
-->
<group delimiter=",">
<text macro="author-short-zh" />
<text macro="issued-year-zh" />
<text macro="citation-locator-zh" />
</group>
</if>
<else>
<!--
Normal comma as a deliminater for references in the default language (English)
-->
<group delimiter=", ">
<text macro="author-short" />
<text macro="issued-year" />
<text macro="citation-locator" />
</group>
</else>
</choose>
</layout>
</citation>
However, the variable/tag lang-zh in the .bib file seems to be ignored even when I add such filed as lang-zh = {yes}, variable = {lang-zh}, or language = {lang-zh} to the .bib file, as shown below.
#article{chen2012,
title = {基于电无级变速器的内燃机最优控制策略及整车能量管理},
author = {陈骁 and 黄声华 and 万山明 and 庞珽},
journal = {电工技术学报},
volume = {27},
number = {2},
pages = {133--138},
year = {2012},
lang-zh = {yes},
variable = {lang-zh},
language = {lang-zh}
}
Then how should I add a filed or variable to the .bib file that can be recognised by the csl?
(M)WE
Full .csl file (say mod_apa_zh_pulipuli.csl)
You can find the .csl file from https://github.com/jgm/citeproc/issues/120#issuecomment-1296207148
(Its original csl called apa_zh_pulipuli.csl is from https://raw.githubusercontent.com/pulipulichen/blogger/master/project/zotero/apa_zh_pulipuli.csl)
tests.bib
#book{xie2015,
title = {Dynamic Documents with {R} and knitr},
author = {Yihui Xie},
publisher = {Chapman and Hall/CRC},
address = {Boca Raton, Florida},
year = {2015},
edition = {2nd},
note = {ISBN 978-1498716963},
url = {http://yihui.name/knitr/},
language = {English}
}
#article{chen2012,
title = {基于电无级变速器的内燃机最优控制策略及整车能量管理},
author = {陈骁 and 黄声华 and 万山明 and 庞珽},
journal = {电工技术学报},
volume = {27},
number = {2},
pages = {133--138},
year = {2012},
lang-zh = {yes},
variable = {lang-zh},
language = {lang-zh}
}
test.md
---
bibliography: [test.bib]
csl: mod_apa_zh_pulipuli.csl
---
#xie2015
#chen2012
As #adam.smith suggested here, using a CSL JSON (.json) file as a bibliography source does the trick:
Convert a .bib file to a CSL JSON (.json) file via pandoc by pandoc .\tests.bib -t csljson -o tests.json (see also an answer in TeX.SE);
Add "lang-zh": "yes" to the generated .json file (This process is mandatory since such a non-standard field as lang-zh = {yes} in .bib is not transferred to a CSL JSON);
Change the bibliography field in the YAML of .md file so that pandoc can refer to the .json file
MWE
test.json
[
{
"URL": "http://yihui.name/knitr/",
"author": [
{
"family": "Xie",
"given": "Yihui"
}
],
"edition": "2nd",
"id": "xie2015",
"issued": {
"date-parts": [
[
2015
]
]
},
"note": "ISBN 978-1498716963",
"publisher": "Chapman; Hall/CRC",
"publisher-place": "Boca Raton, Florida",
"title": "Dynamic Documents with R and knitr",
"type": "book"
},
{
"author": [
{
"family": "陈骁"
},
{
"family": "黄声华"
},
{
"family": "万山明"
},
{
"family": "庞珽"
}
],
"container-title": "电工技术学报",
"id": "chen2012",
"issue": "2",
"issued": {
"date-parts": [
[
2012
]
]
},
"page": "133-138",
"title": "基于电无级变速器的内燃机最优控制策略及整车能量管理",
"type": "article-journal",
"volume": "27",
"lang-zh": "yes"
}
]
test.md
---
bibliography: [test.bib]
csl: mod_apa_zh_pulipuli.csl
---
#xie2015
#chen2012

Can't display images sourced from GraphQL, error [gatsby-plugin-image] missing image prop

I'm trying to source content with images from Contentful into Gatsby but I failed to get images displayed.
I installed gatsby-transformer-sharp, gatsby-plugin-image, gatsby-plugin-sharp, gatsby-remark-images and gatsby-remark-images-contentful.
down below is a simple of my code
import { GatsbyImage, getImage } from "gatsby-plugin-image"
const Projects = ({ data }) => {
const projects = data.projects.nodes
return (
<Layout>
<Seo
title={"Projects"}
description={"Projects & Websites I've Developed"}
/>
<div className={styles.portfolio}>
<h1>My Portfolio</h1>
<h2>Projects & Websites I've Developed</h2>
<div className={styles.projects}>
{projects.map(project => (
<Link
to={"/projects/" + project.slug}
key={project.id}
className={styles.project}
>
<GatsbyImage
image={getImage(project.thumb)}
alt={project.title}
/>
<div className={styles.cardText}>
<h3>{project.title}</h3>
<p>{project.stack}</p>
</div>
</Link>
))}
</div>
</div>
</Layout>
)
}
export default Projects
export const query = graphql`
query ProjectsPage {
projects: allContentfulProjects(sort: { fields: date, order: DESC }) {
nodes {
key
slug
stack
title
thumb {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
id
}
}
}
`
here what i got from GraphQL
{
"data": {
"projects": {
"nodes": [
{
"key": "project",
"slug": "portfolio-website",
"stack": "html - css - javascript",
"title": "Portfolio Website",
"thumb": [
{
"gatsbyImageData": {
"images": {
"sources": [
{
"srcSet": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=750&h=361&q=50&fm=webp 750w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1080&h=520&q=50&fm=webp 1080w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1366&h=658&q=50&fm=webp 1366w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=webp 1920w",
"sizes": "100vw",
"type": "image/webp"
}
],
"fallback": {
"src": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=png",
"srcSet": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=750&h=361&q=50&fm=png 750w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1080&h=520&q=50&fm=png 1080w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1366&h=658&q=50&fm=png 1366w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=png 1920w",
"sizes": "100vw"
}
},
"layout": "fullWidth",
"width": 1,
"height": 0.4817708333333333,
"placeholder": {
"fallback": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAMAAACDi47UAAABv1BMVEUaGhosLSN+gm9ORjIcHBwlJB8kJBgkJBclJBgeHRREORVFWEeEj5SNingqNys+x8tWzNFk1Nhq1dl42Nx51dp219xw19twxMhjyMxKys89x8wnZlw7MhUiIRtrKiRCLCBHys5bztJu1tuD2t501tp62N1519yokpF3b25My9A/yc4oZ10VFRUkJCQoKChHR0c1NTUqKSotOCxEw8dbxcllys1owcR30dR2z9Nyz9NkyM2+n52cjo0/wsc5vsMrXVNdTx2niSCnjCqniiOfgyAtOC1HsbVRq69errJcpah1y8982N1u1dpto7F7RlG7lpeLWXVFr7koYFYtKiJJQyxTTDZMRS9DPSssNytNk5VWf3VbfWVWdVlnsKxryc1ays+xJ06sCy2sCS2wCi2bJkYrXlUjIyMuLi48PDw0NDQsLCwrNyw6n6I/j5BJlZBJlJFavL5Xxco4v8XDEz+QCiSqCSuHCiCJDidhKS07OzszMzMeHRk4NSg7OCs5NSk5NSg6Nio5Nik7Nys6NyocGhI6OjkxMTEYGBgmJiUmJiYjJCQlJSUXFxcWFhYRERE0Lhw7NBxBORwpJRswMDA0NTUvbwraAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAB3RJTUUH5gUJBR4Qdhx/lQAAAGRJREFUCNeNzUEKglAAANEZ/5cgRLTO0ZWCTtS6jdfxEJ5BUNyF+FuIiNSit5zNiKuUAbBAMHLWqfQgctGJWsdqrze/9PH6Z+R3hNphe8z5HFIgQuFQqHbtHSVlyFN9n3w92DQfWKcTSK8wndgAAAAASUVORK5CYII="
what it might be wrong with My code? need some help :)
According to what you said in the comment section, I'd say that there's a position in projects that has no thumbnail defined (or not properly queried).
Try adding a condition wrapping the GatsbyImage display:
{project.thumb && <GatsbyImage
image={getImage(project.thumb)}
alt={project.title}
/>}
That said, check in which project you have no thumbnail.
Finally I have figured it out by
1- I removed all My content and images in Contentful CMS and create a fresh ones, It seemed there was a bug with sourcing Images into GraphQL where the Image src was always giving an empty array!!
2- Taking out getImage function and replace it with <GatsbyImage image={project.thumb.gatsbyImageData} alt={project.title}/>
,then gatsby clean to clear the .cashe and also triggered clean cashe and rebuild.
Now everything is works well.

<ReferenceArrayInput /> not working with my custom data provider (prisma)

I'm currently building a data provider for prisma based on graphcool's one, and failed at succeeding to make <ReferenceArrayInput /> working.
The component successfully queries the values of the item and all the possibles values available, but it looks like it's failing when trying to match both. As a result, I get a label saying At least one of the associated references no longer appears to be available., with no values selected.
Here's the data returned by my data provider:
Returned by the GET_MANY request to grab actual choices:
[
{
"id": "cji4xk7ly00k3085444gszh6e",
"name": "value1",
"option.id": "cji4xk7lx00k20854ns2bersv",
"option": {
"id": "cji4xk7lx00k20854ns2bersv"
}
},
{
"id": "cji4xk7lz00k40854gp876vgn",
"name": "value2",
"option.id": "cji4xk7lx00k20854ns2bersv",
"option": {
"id": "cji4xk7lx00k20854ns2bersv"
}
}
]
And the data returned by the GET_LIST request to grab all possible values:
[
{
"id": "cji4xk7lz00k40854gp876vgn",
"name": "value2",
"option.id": "cji4xk7lx00k20854ns2bersv",
"option": {
"id": "cji4xk7lx00k20854ns2bersv"
}
},
{
"id": "cji4xk7ly00k3085444gszh6e",
"name": "value1",
"option.id": "cji4xk7lx00k20854ns2bersv",
"option": {
"id": "cji4xk7lx00k20854ns2bersv"
}
},
{
"id": "cjit6nvot00j80954n53vj6vt",
"name": "1x100ml",
"option.id": "cjit6dejm00bt0954ts5g2f5g",
"option": {
"id": "cjit6dejm00bt0954ts5g2f5g"
}
},
{
"id": "cjit6gu5o00d00954vzfuda0l",
"name": "19mg",
"option.id": "cjit6e66i00cb0954u1zlg1i3",
"option": {
"id": "cjit6e66i00cb0954u1zlg1i3"
}
}
]
On the JSX part, here's my code:
export const OptionEdit = props => (
<Edit title="Edit an option" {...props}>
<SimpleForm>
<DisabledInput source="id" />
<TextInput source="name" />
<ReferenceArrayInput source="values" reference="OptionValue" perPage={100}>
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
</SimpleForm>
</Edit>
);
I can try to setup something for you to reproduce my issue if needed, I'm hoping that this would be enough for you to help me. If it can help though, here's the repository containing my (very wip) data provider and the dashboard ra-data-prisma
Thanks a lot for you help.
Update:
Here's a codesandbox if you want to try: https://codesandbox.io/s/xvqm6mnyxz?expanddevtools=1&initialpath=App.js&module=%2Fsrc%2FApp.js
Just try to edit a User, and see the responses in the console along with the SelectArrayInput not being loaded with choices.
And here's the datamodel used for generating the Prisma API used in the codesanbox example:
type User {
id: ID! #unique
name: String!
addresses: [Address!]!
}
type Address {
id: ID! #unique
city: String!
user: User!
}
Got it. react-admin expects an array of ids to match the resources. All I needed to do was to set the <ReferenceArrayInput /> source prop to <resource>Ids. That fixed the issue.

Dynamically changing Image URLs in React Native

I'm trying to set the image URL dynamically. The images are locally stored and their location paths are in a JSON file.
JSON File
{
"total": 2,
"categories": [
{
"id": "cat1",
"name": "Burgers",
"itemCount": 10,
"images":{
"main":"./../images/items/Burgers.jpg"
}
},
{
"id": "cat2",
"name": "Pizzas",
"itemCount": 5,
"images":{
"main":"./../images/items/Pizzas.jpg"
}
}
]
}
Code
renderItem: function (item) {
var imageURL = require(item.images.main);
return (
<View style={styles.mainContainer}>
<Image source={imageURL} style={styles.image}>
<Text style={styles.textMain}>{item.name}</Text>
</Image>
</View>
);
}
This gives the following error.
2015-12-10 16:02:45.295 [error][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Requiring unknown module "./../images/items/Burger.jpg". If you are sure the module is there, try restarting the packager.
But if I replace var imageURL = require(item.images.main); with var imageURL = require("./../images/items/Pizzas.jpg"); it shows the image perfectly.
What is causing this? How do this correctly?
Using the require(PATH) method actually make the packager try and resolve the image during packaging which it can't do if its just looking at a variable. I would try doing:
<Image source={{uri: image.images.main}} />
We need to require the image before using it.
Something like this;
const image = require("../../assets/someImage.png");
<Image source={image} />
This thing worked for me.

Accessing custom attribute array in d3js tree node

I am pretty new to the D3JS library but is it possible to add a custom attribute to the json file for the tree layout to process and retrieve the data while building the tree if the particular attribute is not empty?
For example:
{
"name": "Josphen",
"id": "1",
"children": [
{
"name": "Ronald",
"id": "3"
},
{
"name": "Coxy",
"id": "4",
"spouse": [
{
"name": "baby",
"id": "5"
}
]
}
]
}
Would later allow me to retrieve attribute with id=5 while generating the node of id=4.
Any insight into this is appreciated.

Resources