I have added dropzone component in vue.
I want to change the image upload URL dynamically, see the attached screenshot.
I belive you have to do this.form.id
Related
I have a route /member/:id, and on this route there is a image need to be show. I try with static image first like this:
<v-img src="#/assets/photos/Nan.jpeg"/>
or
but It does not show anything or a small broken image icon.
enter image description here
In vue extension of chrome, it contains:
currentSrc: http://localhost:8080/member/img/Nan.93326bd3.jpeg
I cannot see the photo on this path
but I can see on http://localhost:8080/img/Nan.93326bd3.jpeg.
I guess the error related to "/member/"
I also try with "require and :src" or "import" image, but it didn't work.
How can I fix it?
We store the images in /public/images , so if you store an image with file name myImage.png at images folder, you can do:
<v-img src="/images/myImage.png"/>
In Gridsome:
Seems like what is in metaInfo gets generated after mount, which results in no link preview when scraped by facebook.
The og:title, description and image are visible on client side.
How to get it generate on build so it would be in .html straight away?
I've been only able to add global data with head.meta.push({}) in main.js
Solution: move metaInfo into App.vue.
Seems like it only renders App.vue when building and it will only call a metaInfo() in there - where you can use the metadata obj from gridsome.server.js method createPage().
I have a vue template with 12 img tags
<img
:src="item.logo"
onerror="this.style.visibility='hidden'"
/>
The img tag is inside a loop.
The value of item.logo is for example:
"data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgZGF0YS1uYW1lPSJFYmVuZSAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDIuNzYgNTYuODMiPjxkZWZzPjxzdHlsZT4uY2xzLTEsLmNscy0yLC5jbHMtM3tmaWxsOiNmZmY7fS5jbHMtMXtvcGFjaXR5OjAuNjt9LmNscy0ze29wYWNpdHk6MC41OTt9LmNscy00e2ZpbGw6I2EyMWMyNjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxvZ28td25kLXR2LWluZm88L3RpdGxlPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjYuODEiIHk9IjAuMTQiIHdpZHRoPSIxMTUuOTUiIGhlaWdodD0iNTYuNjkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04Ni44OSw3OS40OWgtNS43VjU0LjQxaDUuN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zOS4wMSAtMzcuO"
I do not put here the whole content of the b64, just know that it is a base64 encoded SVG.
The SVGs show correctly.
My problem is that the page rendering is quite long, because the device I use is very slow.
But when I modify the item.logo value by a URI that points to a hosted SVG, the page renders fast without showing at once the svgs, allowing the user to interact with the page while the logos load (lazy load?)
My question:
Is it possible to have a kind of asyncroneous load of these images in the case they are stored in the Vuex store in a b64 format? So the user would still be able to interact with the page while the images get loaded.
Vue module for lazyloading images in your applications: https://www.npmjs.com/package/vue-lazyload.
Looks like this is what you need.
According to documentation,
https://stencil.bigcommerce.com/docs/other-handlebars-helpers
I use a CDN handlebar helper to add an image to my template:
<img src="{{cdn "webdav:img/about.jpg"}}">
After theme uploading, it was changed to:
<img src="https://cdn6.bigcommerce.com/s-1tfospd5/content/img/about.jpg">
Okay, but I need to update the picture.
After uploading a NEW version of the picture to bigcommerce webdav, nothing changes, I still see the old one.
How can I update the picture on CDN?
You need to wait about 30 minutes until the CDN get the new image.
You can test if the new image is there by adding some querystring to your image :
https://cdn6.bigcommerce.com/s-1tfospd5/content/img/about.jpg?test=test_new_image
You can try with :
<img src="{{cdn "webdav:img/about.jpg?new=logo"}}">
Is there any way to reference a cdn image location from a CSS file in order to set a background image? For example, in a component file I can reference an image file using:
{{cdn 'img/my-image.jpg'}}
If I want to use that image as a background image in css, I need to set it in the stylesheet. For example:
.element {
background-image: url({{cdn 'img/my-image.jpg'}});
}
Is this possible, or do I need to set the background image inline in the html?
I see that there is a custom stencilString method, but I don't know how this would work in my situation, since I wouldn't want to hardcode the entire URL of the image on the CDN.
Currently with Stencil, there is not a way to reference it with a variable. This is available with blueprint.
You could always set it using an inline style:
<div class="element" style="url( {{getImage image 'gallery' (cdn 'img/my-image.jpg') }}">
'gallery refers to the size of image to get. See {{getImage}} helper doc here