I am trying to dynamically generate images in my vue.js project by creating a basic method:
methods: {
changeLang(la
getImg(image, ext) {
return '~#/assets/images/' + image + '.' + ext;
},
...
Each component will have it's images generated dynamically:
data () {
return {
cat:'frenchcat',
...
The following line should identify the method, image and date and convert it into the image URL
<img v-bind:src="getImg(cat, 'svg')" v-bind:alt=cat>
But for some reason the source code simply returns:
<img data-v-61dd7a3d src="~#/assets/images/frenchcat.svg" alt="frenchcat"/>
Why is ~#/assets/ not being converted into an URL path?
You need to use require with v-bind:src:
getImg(image, ext) {
return require(`~#/assets/images/${image}.${ext}`);
}
Unsure if ~ before # is needed.
Related
I have a list with several elements (id, name, img_name ). In my asset folder I have a subfolder svgs (srs/assets/svgs). There are the SVGs (logo1.svg, logo2.svg). If I hard code the link it works very well: <img src="#/assets/svgs/brand1.svg" alt="">.
But when I build it dynamically (with a method) it doesn't work. I get a 404. The reason is that it does not interpret #/assets/. He thing it is a string and a part of the path. What i have to change that it works?
<template>
...
// inside a loop
<img :src="makeImgPath(item.img_name)" alt="">
...
</template>
...
methods() {
makeImgPath(imgName) {
return "#/assets/svgs/" + imgName + "svg";
}
}
...
Network says: 404 newapp/#/assets/svgs/brand1.svg
As you have correctly pointed out, vue does not interpret #/asstes. # also only stands for src/. For this reason, you can replace the # with src, then it should work.
makeImgPath(imgName = 'defaultImageName') { // suggestion
return "src/assets/svgs/" + imgName + "svg";
}
I would like to know if there is possibility to download file from Sanity with HTTP request?
I only have reference ID:
{
file: {
asset: {
_ref: "file-fxxxxxxxxxxxxxxxxxxxx-xlsx"
_type: "reference"
}
}
}
I would like to do this is this scenario:
<a href="https://cdn.sanity.io/assets/clientID/dataset/file-xxxxxxxxxxx-xlsx">
Download File
</a>
You can, indeed 🎉 With a bit of custom code you can do it just from the _ref, which is the file document's _id
Creating the URL from the _ref/_id of the file
The _ref/_id structure is something like this: file-{ID}-{EXTENSION} (example: file-207fd9951e759130053d37cf0a558ffe84ddd1c9-mp3).
With this, you can generate the downloadable URL, which has the following structure: https://cdn.sanity.io/files/{PROJECT_ID}/{DATASET}/{ID_OF_FILE}.{EXTENSION}. Here's some pseudo Javascript code for the operation:
const getUrlFromId = ref => {
// Example ref: file-207fd9951e759130053d37cf0a558ffe84ddd1c9-mp3
// We don't need the first part, unless we're using the same function for files and images
const [_file, id, extension] = ref.split('-');
return `https://cdn.sanity.io/files/${PROJECT_ID}/${DATASET}/${id}.${extension}`
}
Querying the URL directly
However, if you can query for the file's document with GROQ that'd be easier:
*[(YOUR FILTER HERE)] {
file->{ url } // gets the URL from the referenced file
}
You can do the same with images, too.
I would like to use FilePond to Load images. But the current image in loading isn't transfered to my object. ( so i can use that object to send it to database ith axios)
My object is simply like that :
data:function() {
return {
image:'',
}}
Then, my FilePond component is like that:
<FilePond
name="test"
ref="pond"
:maxFiles="max || 1"
labelIdle="Drop files here..."
allowMultiple="false"
acceptedFileTypes="image/jpeg, image/png"
:files="image"
v-on:init="handleFilePondInit"/>
Thank you for you help if someone use FilePond with vuejs.
According to enter link description here data:image should be array object.
data: function() {
return {
image: ['']
};
},
I am trying to return the path of different static assets (png) coming from an api (only as 'abcd.png') and then use for cycle to show every one of them in new span, which I'd v-bind style (the png which is returned from the api).
iconPath is the api data which holds pngs.
imgURL is the path to the png.
<div class="col-sm-3 px-3 py-4" v-bind:style="{ 'background-image': 'url(' + imgUrl + iconPath + ')' }"></div>
computed: {
imgUrl () {
return require('./src/assets/images/')
}
}
On first look, the path and the pngs are returned correctly in the console, but when I try to access them no image is found/open.
Thank you.
I think you need to just return the path of the file in imgUrl function, that is
imgUrl () {
return './src/assets/images/'
}
Since I see you are trying to construct the path of the 'background-image' using imgUrl and iconPath function return values. Since I cannot see what rest of code does, I assume this is what you are looking for.
Get the path of a file in gitbook head
This question touch the possibility to get a path of a specific file.
For example, to get some content, before page loads in a gitbook, is possible to add in "head:end" some customizations. This work fine when we need jquery loaded in `.
module.exports = {
book: {
...
/* Load files */
html: {
'head:end': function(current){
console.log()
var p = current.basePath+"/"+current.staticBase+"/plugins/myplugin/jquery-latest.min.js";
...
}
...
Get the path of a file in gitbook block
But in a custom block, how i do this?
blocks: {
myblock: {
process: function(current) {
//current isnt same... :(
// h
console.log(current);
var p = current.basePath+"/"+current.staticBase+"/plugins/myplugin/"+current.args[0];