I'm creating a simple web app that takes a JSON file which holds an url of 6 images stored inside my folder.
Here is the file: https://api.myjson.com/bins/t3ri9 and I want it using vue js's vue-bind:src to attach each url of each image so that they may be displayed on the browser. Here is the code:
<template>
<div id="main">
<br/><br/>
<h2>Here is a list of all your image</h2>
<br><br>
<div id="images">
<div class="image" v-for="image in pod">
<img v-bind:src="image.url"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "wall",
data() {
pod: []
},
created() {
this.$http.get('https://api.myjson.com/bins/t3ri9').then(function (data) {
this.pod=data.body;
console.log(this.pod);
});
}
}
</script>
<style scoped>
</style>
However when I run the project on a localhost it doesn't display the images even though when I do to the console it correctly passed the image's url.
this inside the callback is not the same this as outside (in created() {).
Use fat-arrow function to preserve this from the outside:
this.$http.get('https://api.myjson.com/bins/t3ri9').then((data) => {
this.pod=data.body;
console.log(this.pod);
});
Try this
v-bind:src="require('image.url')"
I'm guessing your local images aren't added by webpack?
Maybe try and use the remote location of the image instead.
http://...
Related
I have a Vuejs component containing an img tag. I can render the image with no problem if I hardcode the src like this.
<template>
<div>
<!-- <img class="rotate logo" alt="Vue logo" src="#/assets/abstractwave.png"/> -->
</div>
</template>
<script>
export default {
name: "RotatingImage",
props: {
filename: String
},
}
</script>
I cannot render the image if I insert bind the src as a prop. As follows... Why is this? What must I change in order to render the image using a prop?
<template>
<div>
<img class = "rotate" alt="Vue logo" :src="`#/assets/${filename}`" />
</div>
</template>
<script>
export default {
name: "RotatingImage",
props: {
filename: String
},
}
</script>
Upon inspection in the browser, I see that the src path is correct, yet the image does not show.
You can make computed property:
computed: {
getImgUrl() {
return require(`#/assets/${this.filename}`);
}
}
Then in template bind it:
<img class = "rotate" alt="Vue logo" :src="getImgUrl" />
when i open the project in https mode, cant retrieve the images(receive 404 ).
Can someone help me?
Code:
<template>
<div>
<img src="/assets/photos/test.png"/>
</div>
</template>
<script>
export default {
name: "home"
}
</script>
v-bind src and require your photos
<img :src="require('/assets/photos/test.png')"
I try to load different pictures dynamically. But it won't work yet.
In template i have my img tag with the dynamic source-path:
<template>
<div id="test">
<img src="require('../../assets/containermoduls/${pname}.png')" />
</div>
</template>
here my data function:
<script>
export default {
data () {
return {
pname: '2x5'
}
}
}
</script>
This is my folder structure:
-src
--assets
---containermoduls
----2x4.png
--components
---p3component
----Page3Left.vue (where my code is from)
Does anybody know what I'm doing wrong? I don't get any error messages on my console. Instead of a picture I see someting like an picture icon.
You should use binding :src instead of src
<img :src="require('../../assets/containermoduls/${pname}.png')" />
I'm taking over a project that has a lot of AJAX loaded HTML snippets. I want to progressively introduce Vue.js where I can. I'm not trying to async load any component definitions or javascript, but I would like to load an HTML snippet that has a v-on:click binding like this:
<button class="btn btn-primary" v-on:click="showModal=true">
Show Modal Dialog
</button>
Is there anyway for vuejs to parse html snippets that come down from jQuery and read the v-* attributes?
You can use <v-runtime-template> to load Vue template strings at runtime:
<template>
<div id="app">
<template v-if="template">
<v-runtime-template :template="template"></v-runtime-template>
</template>
<div v-else>Loading...</div>
</div>
</template>
<script>
export default {
data() {
return {
template: ''
}
},
mounted() {
this.template = this.getVueTemplateFromServer();
},
methods: {
getVueTemplateFromServer() { /*...*/ }
}
}
</script>
demo
With the fine-uploader plugin I am trying to add multiple (dynamic could be 1, or 10) instances with an optional caption field and a manual upload button per section.
The form I am uploading from is dynamically generated in layout as well as content, the uploaded files have to be stored by the handler based upon the section of the form as well as the instance of fine-uploader. I also need the ability to effectively upload each instance of fine-uploader independently
The issue that I am hitting is following the guidelines & demo for the manual upload option, ie adding a click function it will always find only the first instance as it searches for the button using .getElementById.
I can get around this by defining a new template for each instance however I would prefer to use a single template.
The template code (for each instance - abbreviated for simplicity) is
<script type="text/template" id="qq-template-manual-trigger#XX#">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
...
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>Select files</div>
</div>
<button type="button" id="trigger-upload#XX#" class="btn btn-primary">
<i class="icon-upload icon-white"></i> Upload
</button>
</div>
...
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
...
<input class="caption" tabindex="1" type="text">
...
</li>
</ul>
...
</div>
</script>
<div id="fine-uploader-manual-trigger#XX#"></div>
and the uploader script
<script>
var manualUploader#XX# = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-trigger#XX#'),
template: 'qq-template-manual-trigger#XX#',
request: {
inputName: "imagegroup[]",
endpoint: '/SaveFile.aspx'
},
autoUpload: false,
debug: true,
callbacks: {
onError: function(id, name, errorReason, xhrOrXdr) {
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
},
onUpload: function (id) {
var fileContainer = this.getItemByFileId(id)
var captionInput = fileContainer.querySelector('.caption')
var captionText = captionInput.value
this.setParams({
"descr[]": captionText,
<-- Other parameters here -->
}, id)
}
},
});
qq(document.getElementById("trigger-upload#XX#")).attach("click", function () {
manualUploader#XX#.uploadStoredFiles();
});
</script>
in the ideal world I would prefer simply have a single
<script type="text/template" id="qq-template-manual-trigger">
....
</script>
then where required multiple times through the form
<div id="fine-uploader-manual-trigger"></div>
<script>
var manualUploader#XX# = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-trigger'),
template: 'qq-template-manual-trigger',
...
}
qq(document.getElementById("trigger-upload")).attach("click", function () {
manualUploader#XX#.uploadStoredFiles();
});
</script>
The use of the attach function by calling .getElementById just feels wrong, or at the very least cludgy, is there a better way of activating the upload on a per-instance basis?
Thanks in advance
K
Sorted, but if anyone has a better answer...
Instead of using the demo of document.getElementById("trigger-upload")
Simply use document.querySelector("#fine-uploader-manual-trigger #trigger-upload")
eg
<div id="fine-uploader-manual-triggerXX"></div>
<script>
var manualUploaderXX = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-triggerXX'),
template: 'qq-template-manual-trigger',
... // omitted for brevity
}
qq(document.querySelector("#fine-uploader-manual-triggerXX #trigger-upload")).attach("click", function () {
manualUploaderXX.uploadStoredFiles();
});
</script>