Cannot show static image in assets on dynamic router-link - vue.js

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"/>

Related

How to set payment image icon on footer Bigcommerce?

've recently added Zipmoney as a payment option but my theme doesn't support the logo to display in the footer.
I've looked at the community answers which gave code to add to the footer template but my footer refers to another 'payment' icon file to display the icons. See copied code below. Just wondering if anyone can help me out with where I can add the logo image to display next to existing icons in the footer? And does it resize automagically? Or do I need to make sure the image I upload is the correct size?
{{> components/common/payment-icons}}
</div>
for easy. upload zip logo at image manager then open open /templates/components/common/payment-icons.html
paste that image code after like below sample
{{#if show_accept_visa}}
<svg class=”footer-payment-icon”><use xlink:href=”#icon-logo-visa”></use></svg>
{{/if}}
<img src="zip image path">

Dropzone Image Upload Dynamic URL

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

Bigcommerce Stencil use handlebars helper in css to set background image

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

nitmedia/wkhtml2pdf images not working on laravel

I've included the package, the pdf gets generated but somehow the images dont appear on the pdf. The HTML content and CSS works like expected.
When i return the view as how you'd normally return a view in laravel, the receipt displays nicely along with the images.
But when i:
return PDF::html('receipt.show', $data);
The images dont appear.
My view file has the image like so:
<img class="img-responsive" src="img/receipt/banner.jpg">
The image is within:
public/img/receipt/banner.jpg
This is a laravel app running on homestead environment.
You need to use absolute path in image src attribute instead of relative. Smth like:
<img class="img-responsive" src="http://your-domain.com/img/receipt/banner.jpg">
You can use
<base href="http://your-domain.com/" />
into your head and it will help for all your links

Why are the background images in my absolutely positioned div not displaying?

I can't figure out why my background images in my absolutely positioned divs aren't displaying. I'm using firefox, but also in Chrome.
Pariticularly odd is that when viewing the page with the web developer toolbar's Edit CSS dialogue open, the images appear.
The images in question are a div with an id of "joel-image" and the nav items.
http://joelglovier.com
The paths in css are relative to the actual css file .. not the html page..
so your path should either be ../img/joel-image.jpg or better /img/joel-image.jpg
Currently your css file is in /css folder, so the background image property of url(img/joel-image.jpg) translates to /css/img/joel-image.jpg which is wrong ..
The request the browser is making to the image, is returning a 404. So the path to your image is wrong. Double check it. Try an absolute path.