I need to load the image coming from the markdown metadata
---
title: 'First Blog'
description: 'First blog description'
image: ../../common/src/assets/image/image.png
author: 'Stack'
---
When i pass this to my code the and inspect the browser, the image src is just the path below. it's not converting to the static/... as usual for the other images
<img src={post.frontmatter.image} />
How do i get this fixed without using any plugins like next-images. Thanks for the help
Nextjs can serve images under a folder called public in your root directory.
Add a folder to your root call it "public" and Add your assets to it
EXAMPLE:
public
--common
----src
------assets
--------image
----------image.png
---
image: "/common/src/assets/image/image.png"
---
---
<img src={post.frontmatter.image} />
---
Nextjs will take care of the rest for you.
More on Static File Serving
Related
I try to use #nuxt/image with image from assets folder; when using image from static folder or external url, the image is optimised as well; but when on using it on image from assets like below:
<nuxt-img
src="~assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
I have this result in my html
<img src="/_ipx/q_30/_nuxt/assets/img/Icone-accueil/row_left.svg" alt="" class="float-left margin-fleche">
but the image doesn't appear
Using #nuxt/image with images from the assets/ folder does not work.
The following is from the #nuxt/image documentation:
Images should be stored in the static/ directory of your project.
For example, when using <nuxt-img src="/nuxt-icon.png" />, it should
be placed in static/ folder under the path static/nuxt-icon.png.
Image stored in the assets/ directory are not proccessed with Nuxt
Image because those images are managed by webpack.
From nuxt documentation:
Inside your vue templates, if you need to link to your assets
directory use ~/assets/your_image.png with a slash before assets.
In your case:
<nuxt-img
src="~/assets/img/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
Another quote from nuxt:
When working with dynamic images you will need to use require
<img :src="require(`~/assets/img/${image}.jpg`)" />
In your case check this out:
<nuxt-img
:src="require(`~/assets/img/Icone_accueil/row_left.svg`)"
alt=""
class="float-left margin-fleche"
quality="30"
/>
As per Nuxt Image doc, default direcrtory for images is /static, you can change it by update nuxt.config file as below.
e.g,
image: {
dir: 'assets/images',
},
Now you can rewrite as,
<nuxt-img
src="/Icone-accueil/row_left.svg"
alt=""
class="float-left margin-fleche"
quality="30"
/>
This worked for me:
< img :src="require (~/assets/image.jpeg)"
alt=""
/>
For Nuxt3 users whom are using the edge version, which is v1, of nuxt/image,
if you are self-hosting, place images in the 'public' directory as opposed to 'static'.
Quote from v1 docs:
With default provider, you should put /nuxt-icon.png inside public/ directory for >Nuxt 3 make the above example work.
v0 (Nuxt2)
/static/images/myImage.jpg
v1 (Nuxt3)
/public/images/myImage.jpg
Then, access images in the same way others have described. Nuxt/image v1 does not seem able to read a dir named static and of course doesn't read assets as that is used by Webpack.
I'm using Jekyll with Kramdown on Github, and I want to insert an image in my page. So I use
and include img1.jpg in the folder _posts
The generated HTML is
<p> <img src="img1.jpg" alt="img1" /> </p>
but then the link is
http://username.github.io/projectname/2017/04/27/img1.jpg
and this link does not exist. How can I correct it?
Put image somewhere else (e.g. /images/ directory) and then insert it as .
Is there a way to configure my files such that I can have the following folder structure map to the following URL structure?
/
index.html -> www.site.com
about.html -> www.site.com/about
contact.html -> www.site.com/contact
This is a very simple site with just a few pages so it'd be a nice way for me to keep the folder structure very clean and simple.
In about.html use the following permalink
---
title: My about title
permalink: /about/
---
And in contact.html:
---
title: My contact title
permalink: /contact/
---
To remove trailing slashes you need to configure the web server
Then you can create links hardcoding the URL or using the link tag:
[Link to a page]({{ site.baseurl }}{% link about.html %})
#Or
About
Another way is to create the following file structure:
├── index.html
├── about
│ └── index.html
└── contact
└── index.html
Then be sure your permalinks do not include the .html extension in _configu.yml and it will automatically generate the URLs.
Add the following to your _config.yml file:
permalink: /:title/
This will allow you to add a title to the frontmatter of posts/pages. The fallback for this is the filename, sans file extension.
For more:
https://jekyllrb.com/docs/permalinks/
http://jekyll.tips/jekyll-casts/permalinks/
I have the following structure,
root folder
--- application
--admin
--controllers
--models
--views
--newsletter
--images
--screenshot.png
--index.php
--- system
---
---
---
as u can see there is a png file inside application/admin/views/newsletter/
when i am using this img src
application/admin/views/newsletter/screenshot.png" />
i see the image as broken link
but when i paste the address of the image in the addess bar of the browser, it says
"Permission Denied"
how can i make the image be seen, without changing the file structure..
That's because any direct access to application folder is blocked by Deny from all rule in application/.htaccess file (by default). If you remove that, it would work.
But, it's better to put all public files out of application folder. You could create a folder like public or assets beside index.php file and put all public files inside that.
And if you're using rewrite rules to remove /index.php/ from URLs, consider adding a condition (as the example below) if you don't want them to be treated by RewriteRule:
RewriteCond $1 !^(index\.php|robots\.txt|favicon\.ico|public)
# Add your files/folders --^
Then the src would be something like: base_url().'public/newsletter/screenshot.png'.
I've installed LiipImagineBundle to Symfony 2 using this method - Installing and running LiipImagineBundle in symfony 2.1
I've done everything it asks and it initially creates the thumbnail image, however if I change the image dimensions in config.yml the image doesn't change!
I've tried clearing the cache using app/console cache:clear but I get the following error:
[Symfony\Component\Filesystem\Exception\IOException]
Failed to remove file /localhost/path/web//media/cache/my_thumb/media/test.jpg
Here is what my twig template looks like:
<img src="{{ asset(entity.filename) | imagine_filter('my_thumb') }}" />
It looks as though it can't remove the image in order to generate the new one, any ideas?
UPDATE:
Here is my routing file:
# app/config/routing.yml
_imagine:
resource: .
type: imagine
Here is my config file:
# app/config/config.yml
liip_imagine:
filter_sets:
my_thumb:
quality: 75
filters:
thumbnail: { size: [120, 90], mode: outbound }
Try to apply the same permissions to your image directory as you did with the app/logs and app/cache folders.
You should then be able to clear the cache without any errors.
I haven't used the LiipImagineBundle yet, but i think it's best to clear the cache after each change to the dimensions, otherwise the bundle would have to check if the image was changed on each request (which defeats the purpose of caching)!
Hope this helps.