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 .
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.
When we do something like this:
Storage::disk('local')->put('file.txt', 'Contents');
How do you make a link to that file in a view? Something like this:
Download File
there are so many things in documentation and yet not even one example how to create a link to that file
Try this command on your terminal : php artisan storage:link, then laravel storage become public access.
Download File
UPDATE:
According to laravel docs, You can get the URL to the file like this:
use Illuminate\Support\Facades\Storage;
$url = Storage::url('file1.jpg');
Remember, if you are using the local driver, all files that should be
publicly accessible should be placed in the storage/app/public
directory. Furthermore, you should create a symbolic link at
public/storage which points to the storage/app/public directory.
Hope this helps!
Scenario--(working from a fresh Laravel 5.6 project install for reference):
With the existing default paths being /public and /storage/app/public and you want to physically store your logo.png image in the /storage folder and render it on your Welcome page, the process would go something like this:
In your terminal, navigate to your Laravel project folder.
Run command php artisan storage:link
Now create the folder /images in your /storage/app/public folder which gives you /storage/app/public/images.
Look in your /public folder and you will see the (shortcut) subfolders /storage/images
Copy a test image named logo.png into the /storage/app/public/images folder.
In your project's welcome.blade.php under /resources/views paste the
following code over the existing code:
<div class="content">
<div class="title m-b-md">
Laravel
<div>
<a href="/">
<img src="{{url('/storage/images/logo.png')}}" alt="Logo Image"/>
</a>
</div>
</div>
</div>
Save and open your project in your browser and you should see the logo image.
Having said all of that, later on you need a pdf folder to store uploaded pdf
files. Easy, just create a new folder in /storage/app/public called /pdf and
automatically the shortcut will appear in the /public folder. It is a once and "for all" solution.
In my Laravel project I'm trying to load an image into my view using blade but it displays as a broken link. I inspect it with firebug and the src is pointing to the image but nothing is displaying.
My image is located in my project's public/images/users/3/profilePictures/
Here is my <img> in the view.blade.php
<img class="com-profile-picture" src="images/users/{{ $follower->id }}/profilePictures/50thumb-{{ $follower->profilePicture->url }}" alt="{{ $follower->first_name }} {{ $follower->last_name }} Profile" width="50" height="50">
However I get this when I load the page:
When I inspect the image with firebug I see this:
That is the correct src and the image does exist in my public/images/users/3/profilePictures/ directory
Anyone know why this is happening?
This may be caused you are in a route which does not represent the base URL. You should generate the URL for your assets relative to the public/ folder. Use URL::asset('path/to/asset') to generate the URL.
{{ URL::asset("images/users/{$follower->id}/profilePictures/50thumb-{$follower->profilePicture->url}") }}
Or as #lukasgeiter mentioned you can simply use asset('path/to/asset') helper.
You can try with the
php artisan storage:link
else you can use this
A simple fix for the issue (linked broken error)
in .env file
APP_URL=http://localhost
this replace with the
APP_URL=http://localhost:8000
then the issue will be fixed.
delete already generated symlink and then run this command
php artisan storage:link
if you are using laravel, consider excluding public folder or any folder where your public files are store in .htacccess from folders that laravel control.
Do it like this in .htaccess
# Exclude directory from rewriting RewriteRule ^(public/) - [L]
Storage location before (Not Working) :
<img src="{{asset('storage/app/public/media/productImages/'.$list->image)}}" alt="" srcset="">
Working storage location :
<img src="{{asset('storage/media/productImages/'.$list->image)}}" alt="" srcset="">
Else try :
Deleting all the linked/shortcut folders created in public folder
Then recreating the link by running :
php artisan storage:link
I have used collections in my Jekyll website for GitHub Pages. I'm trying to get Jekyll to see the Markdown files inside the collection folder, _projects.
Here's a rundown of the file structure:
root
│
├─ _projects
│ │
│ ├─ project_1.md
│ └─ project_2.md
│
└─ /*Rest of the Jekyll folders and files, _posts, _includes, etc.*/
At the moment, I realized that you must put the Markdown files in the root, so Jekyll can be able to see and parse the files to display them when after you clicked a link that points to them via permalinks. But it cannot "see" the Markdown files if the files are not in the root folder, after testing quite a while.
Is there a way to let Jekyll see and parse files inside the subfolder, _projects, just like how it can see files in the root folder? Maybe I need to set something up in the _config.yml, I guess?
Thanks in advance.
Edit : My first answer was completely wrong. I was talking
_config.yml
collections:
project:
output: true
_project/project_1.md
---
layout: project
title: project
---
## Yo!
Project in **strong** yo `inline code`
some code
yolo !
_layouts/project.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
You now have a project/project_1.html page.
No need to use include: parameter in order to Jekyll to see collection folder or subfolder.
exclude: parameter can be used to ignore a subfolder in the collection.
End Edit
Old answer (nothing to do with collection)
Your _project folder is ignored by Jekyll, just like any underscored folder
To force Jekyll to parse files in this folder, in your _config.yml you can add :
include:
- _project
jekyll build and all is good !
The OP tom-mai78101 comments the the article "Jekyll Blog From a Subdirectory" from Hemanth.HM
has confirmed my guesses that subdirectories are only defined by the permalinks in the Markdown files, and not through the folders within the repository.
I quickly wrote a code snippet, and created a few Markdown files shown here, I am now able to create webpages using Markdown files nested within the _posts folder.
In short, there's no need to use collections in the _config.yml, and just use the default _posts.
It would've been better if there is a way to change the default permalink setup in the _config.yml.
The question "Jekyll not generating pages in subfolders" could be relevant, in order to make some pages being generated in a subfolder.
Or you could use a different baseurl. (Jekyll 1.0+)
Or use the _include folder (see "Jekyll paginate blog as subdirectory")
Or, The article "Running Your Jekyll Blog from a Subdirectory" (from Josh Branchaud) seems to address your situation:
Solution 1
Create a directory called blog in your public html directory (that is, in the directory that your domain points to).
Assuming you are using some sort of deployment scheme (GitHub pages or deployment methods), you need to have that deployment scheme tell Jekyll to deploy to the blog directory instead of the directory it is currently using.
(in your case blog would be projects)
Solution 2
Start by creating a directory locally where you have your Jekyll blog setup.
This directory will sit along side _posts, _site, css, etc.
This is only going to hold non-post files such as index.html.
The blog posts will still go in the _posts directory.
Next, we are going to tell Jekyll that we want it to take our blog posts and put them inside a directory called blog when it generates them.
This can be done by adding a permalink setting to the _config.yml file.
Add a line like this to the top of the file:
permalink: /blog/:categories/:year/:month/:day/:title.html.
The default (which you have probably been using) puts posts in a directory structure starting with the category, followed by the date, and finally with the title of the blog post as the name of the html file.
Which, spelled out would be
/:categories/:year/:month/:day/:title.html.
Does that look familiar? Sure does. It is what we have used above, sans the /blog part.
We are essentially emulating the default directory structure and while adding our blog directory at the beginning.
Lastly, you are going to want to add an index.html file to the blog directory that you created.
This way, when a person goes to mydomain.com/blog/ they can see what blog posts you have to offer.
This index page is going to more or less mirror exactly what you had setup originally for listing your blog posts.
I want to put an image with relative path to local file.
Firefox doesn't seem to accept something like
<img src=images/test.gif>
What's the syntax ?
Try:
<img src="./images/test.gif" />
but have you checked that the image exists at that location?