I can't figure out how to programmatically add in images in React-Native. I have a directory, /img, full of images, and a json file, data.json full of data entries that have corresponding and image file paths:
[
{
"id": "1",
"img": "img1.png"
},
{
"id": "2",
"img": "img2.png"
}
]
I have loaded data.json into a variable with var data = require('data.json'), and I can access the image paths normally through data[0].img. Also, I can create Image tags that display the images through <Image source={{uri = "./img/img1.png"}} style={styles.img}/>.
However, when I try to combine the two, with <Image source={{uri = "./img/" + data[0].img}} style={styles.img}/>, I get this error: Requiring unknown module "./img/img1.png". If you are sure the module is there, try restarting the packager.
I have restarted my simulator multiple times, searched here and the documentation for hours to figure out what I'm doing wrong. Any help would be greatly appreciated.
You cannot show local images this way.
What you can do is the following :
[
{
"id": "1",
"img": require("./img/img1.png")
},
{
"id": "2",
"img": require("./img/img2.png")
}
]
then <Image source={data[0].img} style={styles.img} />
You have two "errors" in your code: object key is not assigned with = but with :. And you can't combine strings in this case, since AFAIK, there's ultimately used require() for images and it doesn't accept anything other but plain strings.
I'd encourage you to do it like this:
const assets = {
img1: './img'+ data[0].img
}
...
<Image source={{uri: assets.img1} style={styles.img}/>
Related
Geoserver 2.14.0 installed on Win7, trying to use mbstyle styling of layers. Get error "org.geotools.mbstyle.parse.MBFormatException: "layers" requires JSONArray" when using a mbstyle on a layer.
Tried to install java.util.jar in (Program Files)\GeoServer 2.14.0\webapps\geoserver\WEB-INF\lib, no change.
What am I missing?
Log output:
org.geotools.mbstyle.parse.MBFormatException: "layers" requires JSONArray
at org.geotools.mbstyle.parse.MBObjectParser.getJSONArray(MBObjectParser.java:245)
at org.geotools.mbstyle.MBStyle.layers(MBStyle.java:135)
at org.geotools.mbstyle.MBStyle.transform(MBStyle.java:347)
at org.geotools.mbstyle.MapBoxStyle.parse(MapBoxStyle.java:53)
at org.geoserver.community.mbstyle.MBStyleHandler.convertToSLD(MBStyleHandler.java:121)
at org.geoserver.community.mbstyle.MBStyleHandler.parse(MBStyleHandler.java:100)
It means that you need to provide an array in the layers element of your style.
Such as:
{
"version": 8,
"name": "point-circle-test",
"layers": [
{
"id": "point",
"type": "circle",
"paint": {
"circle-radius": 3,
"circle-color": "#FF0000",
"circle-pitch-scale": "map"
}
}
]
}
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?
I am trying to integrate with a service that provides FHIR ImageStudy messages in JSON format. Once I have the JSON message I need to convert the message to XML.
I am using the FHIR-net-api found here, https://github.com/ewoutkramer/fhir-net-api I posted earlier and got help using this library to parse standard image study messages. Here is a link to my earlier post, FHIR JSON to XML decoding in BizTalk
The service I am connecting to has added some extensions to the image study message and when I attempt to parse it I get an error that the parser failed line 1 character 1.
My understanding is that if the extension are done correctly the FHIR-net-api library should be able to parse the JSON to XML. Is this correct?
Can anyone identify if the test message below is compliant to the FHIR standard, if not what is wrong with it? I have shortened the message to only contain a single image study but the service returns multiple in a bundle. I have also removed identifying information.
{
"resourceType": "Bundle",
"total": 15,
"entry": [
{"resource": {
"resourceType": "ImagingStudy",
"id": "LALA.e1e6683d-f6d9-e311-ae0e-0050568f64",
"contained": [
{
"resourceType": "Organization",
"text": {"div": "LALA"},
"name": "LALA"
},
{
"resourceType": "Procedure",
"id": "Procedure1",
"code": {"coding": [ {
"code": "RAD-HANB",
"display": "HANDS BIL"
}]}
}
],
"extension": [ {
"url": "https://someplace.org/fhir/extensions/imagingstudy-examstatus",
"valueString": "Finalized"
}],
"started": "2013-12-03T12:30:00-08:00",
"accession": {"value": "A12345BH"},
"procedure": [{"reference": "#Procedure1"}],
"series": [ {
"modality": {
"system": "http://www.dicomlibrary.com/dicom/modality/",
"code": "CR"
},
"bodySite": {"code": "UEX"},
"instance": [
{"title": "DiagnosticReport"},
{
"title": "DiagnosticImage",
"content": [
{
"url": "/fhir/Patient/91111/ImagingStudy?_query=imageUrl&_id=6683d-f6d9-e311-ae0e-0050568f6477&-mrn=12345T&-organization=lala&accession=tester&-status=F",
"title": "Something"
},
{
"url": "/fhir/Patient/9111111/ImagingStudy?_query=html5Url&_id=e1e6683d-f6d9-e311-ae0e-0050568f6&-mrn=123345&-organization=lala&accession=testing&-status=F",
"title": "HTML5"
}
]
}
]
}]
}}
]
}
I suspect that you got a message like this: Error parsing XHTML: Incorrect document syntax. at line 1 row 1. source = " at line 8 col 13
That's what I get once I clean up the instance a little bit to include only the resource and not the wrapper from the Bundle and check it against http://fhir2.healthintersections.com.au/open/.
The first issue is that the narrative inside your div tag is not valid. It needs to look like this:
"div": "<div>LALA</div>"
However there are a bunch of others. The narrative is missing status. Narrative isn't actually allowed on contained resources, you're missing a bunch of mandatory elements, etc. Just go to the link above and paste your JSON into the "upload" box at the bottom of the page and select "validate". That will give you a full report of the issues. (Not all of those will necessarily impact your ability to convert between JSON and XML, but presumably you'll want to fix them regardless.)
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.
I am doing a project in Modx. I created a image slider using Migx. The client wants a image crop tool so I installed Image+. In the Form Tabs: section of the migx variable, I gave
[
{"caption":"Image", "fields":[
{"field":"image","caption":"Image","inputTVtype":"imageplus"}
]}
]
and for Grid Columns: I have given
[
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImagelus"}
]
In the grid column the selected images are not appearing (rest is working). I guess "renderer": "this.renderImagelus" is wrong, but I don't know what its value should be.
Can someone figure out a solution for this.
The current Image+ version from the MODX Repository could work with MIGX.
Use this in the Form Tabs section "inputTVtype":"imageplus" and this in Grid Columns section "renderer": "ImagePlus.MIGX_Renderer
If you want to use an own media source for the Image+ TV you have to add something like this in Form Tabs section just after the inputTVtype line
"sourceFrom": "migx",
"sources": [{
"context": "web",
"sourceid": "2"
}]