I want to locally store image path in a json file.
This is for a json storing data image path:
[ { "image": "./Component/Images/image file } ]
React:
[ { "image": "./Component/Images/image file } ] // React render(){ image tag and source={this.props.image}/> }
Related
I have created a flutter web project and I am using flutter_azure_b2c package which uses asset json files, everything works fine when I run it.
it's shown like this
Now I want to generate these json config files automatically using env variables when I build the app.
Here is my json file format:
{
"client_id" : "",
"redirect_uri" : "",
"cache_location": "localStorage",
"interaction_mode": "redirect",
"authorities": [
{
"type": "B2C",
"authority_url":""
},
{
"type": "B2C",
"authority_url":""
}
],
"default_scopes": [
]
}
How can it be done?
I tried to write into the file when executing main.dart using this package https://pub.dev/packages/global_configuration but json values are not updated when I pass them in flutter_azure_b2c method
I have a folder called images with a number of images. I have another folder called data that has a JSON file with an array of objects, each has an attribute image that is a link to one of the images in the images folder. In the components folder which is at the same level as images and data, I have the Home component, in which I import the data from the data folder, and then tried to map through the array to display the images (along with other data), but the images don't show up.
import React from 'react';
import data from '../data/data.json';
const Home = () => {
return data.map((item) => {
return <img src={item.image} alt={item.name} key={item.id}/>;
});
};
export default Home;
When I import the image directly at the top of the file, it works perfectly file
import React from 'react';
import image1 from '../images/image1.jpg';
const Home = () => {
<img src={image1} alt="image1" />;
};
export default Home;
But I have many images, and I don't want to import all of them directly. I also want the images to be part of an object that contains related information.
How can I achieve this?
EDIT 1:
data.json example
[
{
"id": 1,
"name": "product1",
"price": 999.99,
"rating": 4.5,
"image": "../images/image1.jpg",
"description": "some description of product1 ...."
},
{
"id": 2,
"name": "product2",
"price": 129.99,
"rating": 4,
"image": "../images/image2.jpg",
"description": "some description of product2 ...."
}
]
I have to create easily configurable website bundled into single file.
I'm using webpack 4.x
I have created json file with "configuration"
{
"externals": [
{ "link": "http://lynda.com", "image": "./assets/lynda.jpg" },
{ "link": "https://www.mindtools.com/community", "image": "./assets/mindtools.jpg" },
{ "link": "https://www.ted.com/talks", "image": "./assets/ted.jpg" },
{ "link": "https://stackoverflow.com", "image": "./assets/stack.jpg" }
]
}
I have also configured base64-inline-loader in webpack
// {
// test: /\.(jpg|jpeg|png)(\?.*)?$/,
// use: 'base64-inline-loader?name=[name].[ext]'
// },
{
test: /\.(jpg|jpeg|png)(\?.*)?$/,
loader: 'base64-inline-loader',
options: {
name: utils.assetsPath('[name].[ext]')
}
},
Both configurations above didn't work.
URLs created in vue component based on json data are still relative to file and of course those links points to 404 URLs.
All other inline images for CSS and HTML are processed correctly.
I'm doing something wrong, but i don't know what is this.
Any ideas?
Done, but i'm not 100% happy with this resolution.
I have moved all data from json to application controller with require clause
data() {
return {
externals: [
{ link: "https://lynda.com", image: require('./assets/lynda.jpg') },
{ link: "https://www.mindtools.com/community", image: require('./assets/mindtools.jpg') },
{ link: "https://www.ted.com/talks", image: require('./assets/ted.jpg') },
{ link: "https://stackoverflow.com", image: require('./assets/stack.jpg') }
]
};
}
on webpack site i'm using classic url-loader
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
still looking for normal json file processing possibility
I'm trying to find if JSON file supports defining variables and using them within that JSON file?
{
"artifactory_repo": "toplevel_virtual_NonSnapshot",
"definedVariable1": "INSTANCE1",
"passedVariable2": "${passedFromOutside}",
"products": [
{ "name": "product_${definedVariable1}_common",
"version": "1.1.0"
},
{ "name": "product_{{passedVariable2}}_common",
"version": 1.5.1
}
]
}
I know YAML files allow this but now sure if JSON file allows this behavior or not. My plan is that a user will pass "definedVariable" value from Jenkins and I'll create a target JSON file (after substi
This might help you:
{
"artifactory_repo": "toplevel_virtual_NonSnapshot",
"definedVariable1": "INSTANCE1",
"passedVariable2": `${passedFromOutside}`,
"products": [
{ "name": `product_${definedVariable1}_common`,
"version": "1.1.0"
},
{ "name": `product_${passedVariable2}_common`,
"version": 1.5.1
}
]
}
*Note the use of `` instead of ''
Im using dotenv to declare my envs and then I import the m to the main file but I have a json file which needs the proccess.env but I don't want to hard code the API keys
Is there a way to the envs to the json file without hard coding them ?
from this
{
"accessKeyId": "ACCESS_KEY",
"secretAccessKey": "SECRET_KEY",
"region": "us-east-1"
}
to this
{
"accessKeyId": proccess.env.ACCESS_KEY,
"secretAccessKey": "SECRET_KEY",
"region": "us-east-1"
}
Instead of a JSON file you can create a javascript file and export the json object
module.exports = {
"accessKeyId": process.env.ACCESS_KEY,
"secretAccessKey": process.env.SECRET_KEY,,
"region": "us-east-1"
}
in your code you can directly require this file.