I'm trying to display a background image that it's path needs to be loaded through an API.
The plan is: From a main grid of links, click one and display a background image according to the one clicked.
As of now I am using axios to query my API which sends the data I need. I have the following script part on my component.
<script>
import axios from 'axios'
const lhost = require("#/config/global").host;
let championData;
export default {
name: 'IndividualChampion',
props: {
},
data: () => ({
champions: [],
verPersonagem: mdiMovieOpen,
}),
computed: {
},
created: async function() {
try {
let champion = this.$route.fullPath.split('/')[2];
let response = await axios.get(lhost + "/champion/" + champion + '/full');
championData = response.data
console.log(championData)
let background = '#/assets' + championData['skins']['0']['splash'].replace('.png','.jpg')
}
catch (e) {
return e;
}
},
methods: {
}
}
</script>
And this is my HTML
<template>
<div :style="{ backgroundImage: `url(${require(background)})` }">
</div>
</template>
I have searched but can't seem to find a solution in which the background image is loaded and, when loaded, is presented.
Can someone help?
Judging from your use of '#/assets', you seem to be using webpack with a resolve alias. The expression require(background) is not enough for webpack to determine what files it needs to add to your bundle.
You can help Webpack by specifying the directory that you want to load your file from. All you have to do is take out '#/assets/' from the background variable and use it directly in the require call so that Webpack can see it.
<template>
<div v-if="background" :style="{ backgroundImage: `url(${require('#/assets/' + background)})` }">
</div>
</template>
<script>
import axios from 'axios'
const lhost = require("#/config/global").host;
let championData;
export default {
name: 'IndividualChampion',
props: {
},
data: () => ({
champions: [],
verPersonagem: mdiMovieOpen,
background: ''
}),
computed: {
},
created: async function() {
try {
let champion = this.$route.fullPath.split('/')[2];
let response = await axios.get(lhost + "/champion/" + champion + '/full');
championData = response.data
console.log(championData)
this.background = championData['skins']['0']['loading'].replace('.png','.jpg')
}
catch (e) {
return e;
}
},
methods: {
}
}
</script>
It will bundle every possible file inside the directory, though.
You can read more about it here: https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
Related
I can grab images and display them in a browser using them as a bytearray without any problem. In Normal C# I was also able to do this with PDFs very easily by inserting this bytearray as an but now in Vue3 I am having troubles doing this same thing I've done in the past. What is a simple way to display a PDF document In browser with Vuejs?
This is how I've done in in the past,
I am open to suggestions and a better way to do this.
This will be hosted and be shown on a big screen TV so the department can view the document and it will flash to other ones as well.
<div v-if="byteArrayPDF" class="content">
<object data="byteArrayPDF" type="application/pdf" style="height:700px;width:1100px;"></object>
</div>
</div>
</template>
<script lang="js">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
loading: false,
byteArrayPDF: null
};
},
created() {
this.fetchByteArray();
},
methods: {
fetchByteArray() {
this.byteArrayPDF = true;
this.loading = null;
fetch('https://localhost:5001/api/Doc/Virtual-Visual-Service-2020.pdf')
.then(response => response.json())
.then(bytespdf => {
this.byteArrayPDF = "data:application/pdf;base64," + bytespdf;
this.loading = false;
return;
})
.catch(console.log("Error PDF View"));
}
From what you said in your question, I think you want to load a pdf file in for example a "vue component". If that is right, you can use a code like the code below:
<template>
<div v-if="byteArrayPDF">
<iframe :src="srcData" width="100%" height="500px">
</iframe>
</div>
<div v-else>
loading...
</div>
</template>
<script>
export default {
name: "CompoPdf",
data() {
return {
srcData: null,
byteArrayPDF: false,
}
},
created() {
this.fetchByteArray();
},
methods: {
fetchByteArray: async function () {
// to see the "loading..." effect, I intentionally add a "setTimeout" code. that loads the pdf after "3s". You can remove it in your real app.
await new Promise(resolve => setTimeout(resolve, 3000));
fetch('https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf')
.then(response => {
console.log(response);
// for this case "response.url" is what we need, but if you fetch data for example from a database ... you may need "response.json()" or other codes;
this.srcData = response.url;
this.byteArrayPDF = true;
})
}
}
}
</script>
<style scoped>
</style>
I also suggest that you read more about fetch API and CORS if you are not familiar with that topics, to better manage your request to the url you want.
I'm trying to build Vue 3 dynamic loading JSON files, in order to create a website builder. So each page is defined as a JSON file, in order to allow the user to change the JSON file from the backend (all components are defined in that file).
When I'm loading every other route than auth, it's working fine, but Auth is loading twice (the load_components function).
Here is the example of the routes. Most of the pages will have a loadParent component, but there are a few that will not. And loadParent for now has only <router-view /> in it:
// Simple page
{
path: "/home",
name: "home",
component: () => import("../loadPage.vue"),
},
// Pages with parent
{
name: 'auth',
path: '/auth',
meta: {
title: "Some users" ,
adminOnly: true
},
component: () => import("../loadParent.vue"),
children: [
{
path: '',
name: 'login',
props: (route: any) => ({}),
component: () => import("../loadPage.vue"),
}
]
}
So here is how template looks like:
<template>
<component v-for="block in components" :is="{...block.component}" :key="Math.random()" :vars="block.props"></component>
</template>
And in the setup script I have defined ref where is stored path of the file, like:
const json: any = ref();
Because every file is defined as route name, I'm using import in setup:
json.value = import('../pages/' + route.value + '.json');
So here is how the function how I'm actually loading the components:
const load_components = async () => {
console.log('load page components ')
// Get file for load
Promise.resolve(json.value).then(function (e: any) {
// Reset previous page pages
components.value = [];
// For each component for the page and register them under new const of the pages
e.default.components.forEach((c: any) => {
components.value.push({
"component": defineAsyncComponent(() => import('./templates/' + template.value + '/' + c.component)),
"props": c.props
})
})
}).catch((e: any) => {
// If component can't be loaded - Delete for production
console.log(e + ' cannot be loaded!');
});
}
So in order to trigger the function, I'm doing something like:
onBeforeMount(async() => {
json.value = import('../pages/' + route.value + '.json');
// Initiate component load
await load_components()
})
// /** Watch when client changes a page to load new json for next page - This function is for pages that has same component */
watch(router, async (value: any) => {
json.value = import('../pages/' + value.name + '.json');
// There is no need for that if I load it really dynamically
await load_components()
})
Maybe just the approach is not correct, what do you think?
I am new to VueJS and I am trying to display a local html-file inside of the Vue Application.
I fetch the html file with axios like following:
<template>
<div>
<h1>bla</h1>
<div v-html="input"></div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
input: null,
}
},
created() {
this.loadFile()
},
methods: {
loadFile() {
axios({
method: "get",
url: "../../test.html"
})
.then(result => {
this.input = result.data;
console.log("Data: " + result.data)
})
.catch(error => {
console.error("error getting file: " + error);
});
},
}
}
</script>
We generate the html-Files with Bokeh (interactive Charts). If I open the html Files in the Browser they are shown correctly. These files contain
<script type="text/javascript">
and <script type="application/json">.
I tried this with a simple "Hello World"-html Example and this works fine and gets displayed in Vue. But when I read the actual file, I just get an empty page. The console.log(result.data) shows me the correct and complete html Code but I don't get any errors, so I can't figure out the problem.
Does anyone know, what I have to adjust to make this work?
Thanks !
The reason is the statement this.input = result.data tries to parse result.data as json but it is not.
Send the json from the server and use it in your code properly.
Are you doing this inside of a .vue file or is all of this in a .html file. If in html you need to remember to set the el property on your Vue model to ensure it knows where to render. If this is a .vue there has to be a defined template for the same reason.
Here is a fiddle with an example. Yes the site has issues rendering with correct layout, but it renders. This is an example for <script> tags in your html file or just a raw .js file. Looks like you were making a Vue component (.vue) but the premise is still the same as long as you define the template where the Vue code is to be rendered.
Edit:
What does your vue file look like? This is what I'm expecting.
<template id="foo">
<div v-html="input"></div>
</template>
<script>
export default {
template:'#foo',
data: {
input: null
},
created() {
this.loadFile();
},
methods: {
loadFile() {
let _this = this;
axios({
method: "get",
url: 'https://jsfiddle.net/',
})
.then(result => {
console.log(result);
_this.input = result.data;
console.log("Data: " + result.data)
})
.catch(error => {
console.error("error getting file: " + error);
});
},
}
};
</script>
I tried to get vue-dplayer working, but after using the official configuration the video does not load or play. When I inspect the code that is generated, I see the url on the page.
<template>
<div>
<d-player #play="play" :options="video" ref="player"></d-player>
</div>
</template>
<script>
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'
export default {
name: 'play',
components: {
'd-player':VueDPlayer
},
data () {
return {
video:{
url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
pic: '../img/icons/01.jpg'
}
}
},
methods:{
play(){
console.log('play callback')
}
},
mounted(){
const player = this.$refs.player.dp
}
}
</script>
The problem is simply that you are not using an options object with the right keys. You are required to have an options object with a video key in it, but instead you are passing an object with the url and pic key. Simply wrap it in an extra object so it can find the options.
data () {
return {
options {
video:{
url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
pic: '../img/icons/01.jpg'
}
}
}
}
<d-player #play="play" :options="options" ref="player"></d-player>
So I am making an app with a control panel and i want to be able to change a few images inside the app dynamically and my problem is, it just won't work
This is the div I am trying to change
<div class="bg-image bg-parallax overlay" :style="`background-image:url(${bg1url})`"></div>
this is the script part of the Home.vue file
<script>
import axios from 'axios';
export default {
name: 'Home', // this is the name of the component
data () {
return{
page_data: {},
bg1url: null,
};
},
created() {
axios.get("http://localhost:5001/api/v1/pages")
.then((result) => {this.page_data = result.data.page_data});
this.bg1url = require('#/assets/img/' + this.page_data.background1);
alert(page_data.background1);
},
};
</script>
I have tried most of the suggestions on stack overflow but nothing seems to work.
I use the default webpack configurations and generated structure
Note: the parts with axios fetching from the backend work correctly. The only problem is adding the image to the style.
I think could be because you are setting the value for bg1url outsite of promise (calback function of axios), and so this make the code sync and not async
so please try to update, use this instead
created() {
axios.get("http://localhost:5001/api/v1/pages").then(result => {
this.page_data = result.data.page_data
this.bg1url = require('#/assets/img/' + this.page_data.background1);
});
},