I have implemented lazy load and render hooks using the Hugo guide. However, it works locally but does not work when deployed to Netlify.
Why is that happening?
My markdown is such:
In chrome dev tools it renders as:
<img src="path" alt="Title" loading="lazy" width="100%" height="auto">
My render template is placed here: themes\red\layouts_default_markup\render-image.html
The template code is:
<!-- layouts/_default/_markup/render-image.html -->
{{ $img := imageConfig (add "/content" (.Destination | safeURL)) }}
<img
src="{{ .Destination | safeURL }}"
alt="{{ .Text }}"
loading="lazy"
width="100%"
height="auto"
/>
I found the issue. In netlify I explicitly set the hugo version to a very new release as below and the problem was solved.
Related
I have created an Array with three objects and a loop over it in my template.
It is working fine for getting other data and src data but it is not showing my images.
Does anybody what should i do?
sandbox link to my project
And here is my template code
<div
class="box m-3"
#click="selectBox(item.id)"
v-for="item in boxData"
:key="item.id"
:class="{
'border-select': selected(item.id),
}"
>
<p>{{ item.name }}</p>
<img :src="item.src" width="60" alt="" />
src: {{item.src}}
</div>
My data
boxData: [
{ id: 1, name: "object 1", src: "#/assets/power(1).png" },
{ id: 2, name: "object 2", src: "#/assets/power(1).png" },
{ id: 3, name: "object 3", src: "#/assets/power(1).png" },
],
Solution 1:
If you don't want to use Webpack assets from the assets directory, you can add the images to the static directory.
In your code, you can then reference these files relative to the root (/):
<!-- Static image from static directory -->
<img src="/my-image.png" />
<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />
Nuxt doesn't change this path, so if you customize your router.base then you'll need to make sure to add that manually to your paths. For example:
<img :src="`${yourPrefix}/my-image.png`" />
Solution 2: When working with dynamic images you will need to use require
<img :src="require(`~/assets/img/${image}.jpg`)" />
Image not displaying in loop Vue.js
<img :src="require(`#/assets/${item.src}`)" width="60" alt="" /> src: {{ item.src }}
It worked like this
I have I think a small issue but I can't resolve it since more than 2 hours ...
I have a VueJs application and I'm trying to display an image that came from an API.
In my register.html I have that code :
<img :src="'./assets/' +nation.drapeau"/>
When I check the browser I see the correct path './assets/images/drapeaux/AFC/Australie.png' but nothing is displayed !!!! Why ? My path is not ok ?
What I'm doing wrong ?
This is the structure of my VueJs folder
If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.
<template>
<div>STATIC IMAGE</div>
<img src="./assets/logo.png" />
<div>DYNAMIC IMAGE</div>
<!-- <img :src="'./assets/logo.png'" /> IT DOESN'T WORK-->
<img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>
Demo:
https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281
Another source:
How to import and use image in a Vue single file component?
Try using require since it's a dynamic src
<img :src=require(`./assets/${nation.drapeau}`)/>
The response , thanks guys :
<img :src="require('#/assets/' +nation.drapeau)"/>
So I'm creating a Vue.js web app to act as my resume. On there, I want users to be able to actually download a copy of my resume, but I can't seem to get it working correctly. On my Home.vue page, I have:
<template>
<div class="flex-grow overflow-auto max-h-screen w-full dark:text-gray-300">
<div class="m-auto pt-4 lg:grid lg:grid-cols-2 lg:grid-rows-2 lg:gap-8">
<div class="m-auto">
<img class="rounded-md" alt="headshot" src="../assets/headshot.jpg">
</div>
<div class="m-auto">
<h2 class="text-2xl pl-2 py-4 text-center lg:text-left lg:text-8xl lg:px-8">Quick blurb</h2>
</div>
<div class="lg:col-span-2 mx-auto lg:h-8">
<p class="text-base text-center lg:text-2xl">
Email
|
LinkedIn
|
GitHub
|
<a href="my_resume.pdf" download>Resume</a>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
When I'm running it locally, I have no issue downloading it. When I run yarn build and run a server from dist/, I have no issue downloading it. It's only when I deploy it on AWS Amplify and test it from there do I run into the issue (basically acting like it can't find it). I've tried putting
<a href="/my_resume.pdf" download>Resume</a>
as well as
<a :href="`${publicPath}my_resume.pdf`" download>Resume</a>
....
data () {
return {
publicPath: process.env.BASE_URL
}
}
to no avail. It's in the public/ folder, along with the index.html and an icon that it has no issues accessing. I have no idea what the issue is.
I dont know what version of vue you use and how did you configure your webpack, so i dont know if my solution is gonna work for you, but here i go:
Add assets folder to your public folder and add in it your pdf:
example
2.to your source folder add file vue.config.js if its not already there: example
define assets as your assets folder in your vue.config.js:
module.export ={
assetsDir: 'assets'
}
<a href="assets/my_resume.pdf" download>Resume</a>
here is the documantation: https://cli.vuejs.org/config/#assetsdir
I would like to speed up my Shopify website load time by lazyloading my images. The problem is that I cannot locate the specific image files in the code in order to add the class= "lazyload" to it.
Here is what I have tried:
I have pasted this code at the top of the product-template.liquid page:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
And then adding the code: class= "lazyload" to the end of any chunk of code that I think looks like an image, but it doesn't work.
Product-template.liquid page 1 page 2 page3
Would anyone be able to help me understand where this code goes and how to identify where I need to put the code to lazyload an image?
I see that you're using <img src="..." /> . For lazyload to work, change it to <img data-src="..." />
And the better alternative is to implement native lazy loading. Just add loading="lazy" to your images and voila.
Ex: <img src="https://dummyimage.com/600x400/000/fff" loading="lazy" />
More details & a combined use with lazyload library - https://web.dev/native-lazy-loading/ & https://caniuse.com/loading-lazy-attr
In the online code editor, add the below code before close tag.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.
<img class="lazyload" data-src="image.jpg" />
Instead of
<img src="image.jpg" />
In statamic, I have a container with images defined, and attributes set on those images. I then save a single asset page variable in page/index.md
photo: assets/main/image.jpg
I can use the method below, but only if I create a single image fieldset for the page, which is tedious.
{{ asset:photo }}
{{ glide src="{{ url }}" alt="{{ alt }}" />
{{ /asset:photo }}
{{ asset:photo }}
<img src="{{ value }}" alt="{{ alt }}" />
{{ /asset:photo }}
I can also make a container and put the single image in the container to access like below, but that is also tedious.
{{ assets container="photo" }}
<img src="{{ glide:id height="44" fit="crop_focal" }}" alt="{{ alt }}" />
{{ /assets }}
What is the best way to access single assets with their attributes without creating a container or fieldset every time? Bonus if I can also use glide to manipulate the image!
I resorted to using the below method, but cannot access any attributes this way.
<img src="{{ glide:photo height='44' fit='resize' }}" alt="Have to enter this attribute manually" />