I'm building an app in Vue 3 that lists local stores. To add and remove stores I've made a JSON file that lists them, including a URL to an image icon (SVG). The JSON file is imported in my Vue component and lists the stores correctly. However, this is not the case for the image files, see code below.
JSON
[
{
"storeName": "Kapper",
"storeId": "s0001",
"imgUrl": ""
},
{
"storeName": "Manicure",
"storeId": "s0002",
"imgUrl": ""
},
{
"storeName": "Supermarkt",
"storeId": "s0003",
"imgUrl": "../../assets/icons/021-grocery.svg"
]
VUE
<template>
<ul class="storeList">
<li class="store" v-for="data in $options.stores" v-bind:key="data">
{{data.storeName}}
<img :src="data.imgUrl"/>
</li>
</ul>
</template>
<script>
import stores from './stores.json'
export default {
stores: stores,
}
</script>
<style lang="scss" scoped>
#import './styles.scss';
</style>
Some things I found out:
Hardcoding the URL seems to work fine
Placeholders from the web also seems to work fine (e.g https://picsum.photos/200 works perfectly)
Other file extensions such as .png also don't work
Changing the directory of the icons is what worked for me in the end. Changed the icons from the "assets" folder to the "public" folder.
Related
Now i use visual studio code to do my project. I can build my code without error, but when running, it no show out the content for html file, only have show css like header abd footer. i have click button on header but cannot go to other page.Here is the sample code
code in index.html
<nav>
List
New student
Student feedback
</nav>
Vue router
const router = new VueRouter({
routes: [
{ path: '/home', component: load('home') },
{ path: '/insert', component: load('insert') },
{ path: '/update/:id', component: load('update') },
{ path: '/feedback', component: load('feedback') },
{ path: '*', redirect: '/home' }
]
});
File name and type: _home.html, _insert.html, _update.html, _feedback.html
Can help me see the problem, thank you
I don't think you should edit directly to index.html as Vue is Single Page Application (SPA) framework. Instead, you should use Vue Component for each page.
This video might help you to figure out how to use Vue and Vue Router properly: https://youtu.be/nnVVOe7qdeQ
Edit:
For sake of clarity, Let me build simplified diagram of Vue project for you.
First of all, make sure you create the project via vue cli. It guides you to build your new vue project better.
Let's say we have 3 pages:
Home
About
Another
Each page has its own CSS, HTML (we call it template), and JavaScript in one file, the .vue file. To connect them, we need a first entrance, main.js. Inside of it, we can configure the router.
Inside main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import HomePage from "./HomePage.vue";
import AboutPage from "./AboutPage.vue";
import AnotherPage from "./AnotherPage.vue";
// This is your router configuration
Vue.use(VueRouter);
const router = new VueRouter({
[
{ path: "/", component: HomePage },
{ path: "/about", component: AboutPage },
{ path: "/another", component: AnotherPage },
],
mode: "history",
});
// Initialize Vue App
new Vue({
router,
render: h => h(App),
}).$mount("#app");
Then, we need to create App.vue and put <router-view /> inside of it.
Inside App.vue source file
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
// Keep this empty. Except if you
// need to add sidebar or any else.
}
</script>
Now you're ready to create those three pages
Every pages looks like this:
<style scoped>
// Your CSS here
</style>
<template>
<div>
<!-- Your HTML here -->
</div>
</template>
<script>
export default {
data() {
return {
// Your reactive data here
}
},
mounted() {
// Your script here
},
methods: {
// Your functions here
},
}
</script>
That's all I can explain, hope it helps. If I missed something, please don't hesitate to tell me. Thank you!
I am basically trying to use the json file to store few data and use them in the components.
[
{
"heroTitle": [
"Banner image",
"assets/images/banner/sunset.jpg",
"sunset.jpg"
],
}
]
above is a sample json
below is my component
<template>
<header>
<div class="hero">
<h1 class="hero__title">"banner name here"</h1>
<img src="image path and file here" alt="alt text here" />
</div>
</header>
</template>
Also, is there a way to edit the jason from the app itself?
Of course you can utilize local JSON data in your Vue components.
Assuming you have this JSON data in data object of Vue component, then you can utilize Vue template syntax (tick syntax) such as "this.heroTitle[0]", which refers to "Banner Image".
Yes, this question may be duplicated from other questions, but I couldn't find solution for this problem.
I create something simple
1 component that read a json and load image.
The json
{
"images": [
{
"id": 1,
"url": "../assets/images/slider/croissant-other.jpg",
"description": "Croissant"
},
{
"id": 2,
"url": "../assets/images/slider/croissant-3570.jpg",
"description": "Croissant 3570"
}
]
}
The component
import React from "react";
import jsonCarrousel from "../data/carrousel.json";
function Carrousel() {
return (
<div>
{jsonCarrousel.images.map((image, i) => (
<div className="item" key={i}>
<img src={require(`${image.url}`)} alt={image.description} key={i} />
</div>
))}
</div>
);
}
export default Carrousel;
The example in live
https://codesandbox.io/s/stupefied-fast-1zfdj
The error:
/src/assets/images/slider/croissant-other.jpg hasn't been transpiled yet.
Compiled code will look into /public to find your images. You should move your assets to /public instead of src. (manually or by bundle tool)
Also, image source should be src={`${image.url}`}
https://codesandbox.io/embed/elastic-solomon-1ul1o
This is a more descriptive solution.
To load images dynamically from a local JSON file, you need to put the images that you would like to use in the JSON file, inside a folder in the public folder (you can name it whatever you like). E.g. public/images/imgage.png.
You can then render it with:
You can import it in your JSON like so:
{
"images": [
{
"id": 1,
"url": "/images/imgage.png"
}
]
}
...
<img src={require(`${image.url}`)} alt={image.description} key={i} />
...
create-react-app has a public folder by default.
The folder structure would look something like this:
└───public
│ └───images
│ │ image.png
│
└───src
│ yourfiles.js
Alternatively, you can import the images that are in the src folder, directly in the react component to render them:
import img from "./imgage.png";
const component = () => <img src={img} />
{
"images": [
{
"id": 1,
"url": "https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg",
"description": "Croissant"
},
{
"id": 2,
"url": "https://www.belightsoft.com/products/imagetricks/img/core-image-filters#2x.jpg",
"description": "Croissant 3570"
}
]
}
Code changed
function Carrousel() {
return (
<div>
{jsonCarrousel.images.map((image, i) => (
<div className="item" key={i}>
<img src={image.url} alt={image.description} key={i} />
</div>
))}
</div>
);
}
I'm an angular novice, currently building an angular2 app.
What I want to do is generate a series of DOM components from the following object data:
// Class construct with alphabeticalized properties
export class Screens {
screens: Array<Object>;
}
export var screenData: Screens = {
// Lists all of the audio files in the course
screens: [
{
id: 0,
template: 'templateURL-0.html',
css: 'templateURL-0.css'
},
{
id: 1,
template: 'templateURL-1.html',
css: 'templateURL-1.css'
},
{
id: 2,
template: 'templateURL-0.html',
css: 'templateURL-0.css'
}
]
};
I want the end result to be something similar to the following where template 0 will be displayed twice, and template 1 once; in order:
<app-screen></app-screen> <!-- templateURL-0.html content -->
<app-screen></app-screen> <!-- templateURL-1.html content -->
<app-screen></app-screen> <!-- templateURL-0.html content -->
I read the tutorial on Structural Directives and I think I need to implement something along those lines, however I'm honestly feeling a little lost on the best approach.
Ideally I would like to have something like:
<app-screen *ngFor="let screen of screenData.screens"></app-screen>
Which would then somehow set the template URL depending on what screenData.screens.template is.
Or should I do something like this? (unsure if correct syntax)
<div *ngFor="let screen of screenData.screens" [ngSwitch]="screenData.screens.template">
<app-screen-template1 [ngSwitchCase]="'templateURL-0.html'"></app-screen-template1>
<app-screen-template2 [ngSwitchCase]="'templateURL-1.html'">Ready</app-screen-template2>
</div>
Note: I will never change the templateURL reference.
I found that the best method to achieve this is to implement routing with the built in RouterModule.
So in the end I have the following in my class, where the template property is a url path / url segment.
// Class construct with alphabeticalized properties
export class Screens {
screens: Array<Object>;
}
export var screenData: Screens = {
// Lists all of the audio files in the course
screens: [
{
id: 0,
template: 'template/template-0'
}
]
};
Then when I want to load / instantiate this template, all I have to do is navigate to this url using something like:
<!-- Goes to localhost:4200/template/template-0 -->
<button [routerLink]="[screen.template]"></button>
Where screenis a bound variable in my .ts.
More on routing and navigation here.
I'm new to AngularJS. I have a web service which returns a list of cdn links for fonts. I want to use it and show some text using the fonts in run time. My client application is written in angularJS. How can I achieve this? Please help. This is what I have tried so far. How can I inject font faces on demand?
app.js (data returned by web service is shown as a list here.)
var app = angular.module( 'app', [] );
app.controller('appController', function($scope) {
$scope.fonts = [
{
"family": "Abhaya Libre",
"url": "https://cdn.rawgit.com/mooniak/abhaya-libre-font/gh-pages/fonts/AbhayaLibre-Regular.otf"
},
{
"family": "Gemunu Libre",
"url": "https://cdn.rawgit.com/mooniak/gemunu-libre-font/gh-pages/tests/fonts/GemunuLibre-Regular.otf"
},
];
});
app.html
<div ng-app="app" ng-controller="appController">
<p ng-repeat="font in fonts">
<span style="#font-face {font-family:{{font.family}}; src: url({{font.url}});}">
{{font.family}}
</span>
</p>
</div>
JSFiddle - https://jsfiddle.net/lpsandaruwan/rpffoo06/
Here is the Solution, in the style you are not putting font-family:{{font.family}};
http://pastebin.com/WmBv5XDB