Laravel 5.1 not loading images (always pending) - laravel-5.1

All of my images are in public/images folder. I had no problem. Suddenly my images (background images & img elements) not loading (always pending).
could anyone help?

Image source: public/images/image.png
Css source: public/css/style.css
Inline:
<div style="height: 45px;background-image:url('{{ asset('images/image.png') }}');border-radius: 5px;position:relative">
In css file:
background-image: url("../images/image.png")
Img src with asset in blade:
<img src="{{asset('images/image.png')}}" alt="">

Related

How to access assets with webpacker gem

Could you explain me how to access assets from webpacker gem within vue.js components? For example - how to create div with background image. I've tried use /app/assets/images and /app/javascripts/assets folders but images is only available in template section, but not in style section :(
in my case
<template>
<div id="home">
<div id="intro">
<img src="assets/cover-image-medium.png" alt="">
</div>
</div>
</template>
works fine, but
<style scoped>
#intro {
height: 200px;
background: url("assets/cover-image-medium.png");
}
</style>
not working :(
Whats wrong?
New Rails' webpacker stuff is pretty raw, so that's the configuration that works for me:
config/webpacker.yml (for webpacker 3):
resolved_paths: ['app/javascript/images', 'app/javascript/src']
compile: false
# ...
JS files:
/app
/javascript
/packs
# only entry point files
vue_application.js
/src
some_component.vue
/images
logo.svg
in component:
<script>
import 'images/logo.svg'
</script>
in template:
<img src='~images/logo.svg' />
point the tilde here - it means that the image is a module dependency
in CSS:
<style lang='sass'>
#app
background: url('../images/logo.svg')
</style>
For some reason tilde does not work here, so relative path is used.
If I understand your question correctly, you will have to find the webpack.base.conf.js file inside your build folder, then find the code that looks like this:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
}
Then add the following line to the alias object: 'assets': resolve('src/assets/'), which will work for the assets folder being right below the src folder. You can also change the key string from assets to whatever alias name you desire.
EDIT:
I forgot to mention, to access aliases in style code, you have to prefix it with a ~ (telda) so that assets becomes ~assets.
Since this is tagged with Vue.js I will answer for that. None of the other answers worked with Vue 2.x.
For Attributes
A webpacker require statement returns the full URL of the required asset (resolved based on your resolved_paths inside webpacker.yml). Based on that, you can do something like this:
<img :src="require('images/what-a-pain.png')" alt="Finally working" />
Please note the colon causing the src attribute to be bound to the result of the javascript expression.
You can also use ID anchors by appending them, for example with SVG:
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<use :href="require('images/icons.svg') + '#copy'" />
</svg>
Vue templates are generally pre-compiled to javascript equivalents, so a require statement is needed to pull the assets in at compile time, not runtime.
For CSS urls, scoped or not
Simply use a tilde ~ and a path. The path must be relative to either the file including it or the resolved_paths from webpacker.yml.
.relative-pathed {
background: url(~../../../assets/images/quitethepath.svg) center center no-repeat;
}
.works-after-editing-webpackeryml {
background: url(~images/quitethepath.svg) center center no-repeat;
}
For this usage there is no need to require() the asset.
Please note: there is a difference in paths between development and production, especially if Sprockets is also used. Simply doing src="/assets/image.png" will sometimes work in developement, but not production.
You can try
background: url("/assets/cover-image-medium.png");
Instead of
background: url("assets/cover-image-medium.png");
If you have installed sass-rails gem, try this:
<style scoped>
#intro {
height: 200px;
background: image-url("cover-image-medium.png");
}
</style>

Images on Rails not showing up on my browser

I am trying to include an image in my web application but it is not showing up properly on my browser(localhost:3000). Have I set it up wrongly?
This is my view code:
<div class="row">
<div class="col-sm-4">
<img src="‪assets/img/Lab Potion.png" alt="#" class="img-responsive">
<h2>random text</h2>
<p>random text</p>
</div>
</div>
I downloaded an image and saved it under:
-Desktop
-rails_projects
-project_name
-app
-assets
-images
When I check in the images folder there is a file named Lab Potion.png and a bunch of random numbers inside(fingerprint?)
Why is the image not showing up?
<%= image_tag('Lab_Potion.png', :style => "z-index:19; position: relative; float: right;") %> will work. get rid of the space in the file name too, if not just for my sanity.
The random numbers are like a security feature and on each precompile the numbers end up changing. It's more complicated than that, but that is the gist.
And lastly, i doubt you have a img folder as well.

Is it possible in Rails/Asset pipeline compress several SVGs to one file?

As you know you can compress several CSS files to one (or JS files). I was wondering if it's possible to compress several SVG to one external file, so the server makes just one request
Basically SVG files are just XML text so it's theoretically possible, however there is a catch how to render several of those images on different places
I'm just wondering
Check the answer to this question, which describes how to configure the filetypes the Asset Pipeline will manage: Using fonts with Rails asset pipeline (despite the title, it applies to more than fonts).
Thx for answer but in the end I ended up doing it like this:
In my case I wanted to use my SVG as a background image of div tag so I don't needed to precompile SVGs, I just put the compress format directly to background-image: url('here')
so for multiple SVG background:
width: 600px:
height: 400px:
background-image: url('data:image/svg+xml ...first svg '), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwb2x5bGluZSBpZD0ic3ZnXzMiIHBvaW50cz0iNTM4LjUsMzMzLjU2OTU2NDgxOTMzNTk0IDMyMi4yNSwyNzguMjg0NzgyNDA5NjY3OTcgMTA2LDIyMyAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBmaWxsPSJub25lIi8+CiAgPGVsbGlwc2UgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIGN4PSIzNDMiIGN5PSIxNzAiIGlkPSJzdmdfMSIgcng9IjE0MCIgcnk9IjEwNSIvPgogPC9nPgo8L3N2Zz4=')
check it here: http://codepen.io/equivalent/full/ymefJ
raw svg format:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<polyline fill="none" stroke-width="5" stroke="#000000" points="538.5,333.56956481933594 322.25,278.28478240966797 106,223 " id="svg_3"/>
<ellipse transform="translate(-402 -120)" ry="105" rx="140" id="svg_1" cy="290" cx="745" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>
editor: http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html
I believe that the link in Tom Harrison answer is on to something and from what I saw it might work, but I didn't try it myself. So if you want to truly precompile SVG with assets pipeline I encourage you to use that tactic.

background-image: url("") in CSS h:outputStylesheet is not loading [duplicate]

This question already has answers here:
How to reference JSF image resource as CSS background image url
(2 answers)
Closed 7 years ago.
Sorry if question is not properly asked. Image is showing fine in struts project but not in JSF2 project. All the css and buttons are rendering fine except image that has url in css.
Folder structure
resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png
bootstrap.min.css
background-image: url("../img/glyphicons-halflings.png");
1 -
if I use <h:outputStylesheet library="css" name="bootstrap.min.css"/> than background-image url generated is http://localhost:8000/img/glyphicons-halflings.png thus image not loading. It should be http://localhost:8000/resources/img/glyphicons-halflings.png
2 - If I use <link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/> than
Firefox -> Firebug -> Net tab {resources added multiple times}
http://localhost:8000/resources/resources/img/glyphicons-halflings.png
not sure how to load image which is in css and applied on class.
show EDIT icon as link to click to next page.
<h:outputLink value="edit.xhtml" >
<i class="icon-edit" ></i>
<f:param name="id" value="#{person.id}"/>
</h:outputLink>
You should be using the EL variable #{resource} in CSS to specify image resources.
background-image: url("#{resource['img/glyphicons-halflings.png']}");
See also:
How to reference JSF image resource as CSS background image url

Data-Icon attribute in Jquery Mobile produces black circle with no logo?

<div data-role="header" data-theme="e">
<a href="index.html" data-theme="b" data-icon='gear'>Switch</a>
<h1>Header</h1>
Home
</div>
No gear or home icons show. I dont get it. Here are files used, all newest.
<link rel="stylesheet" href="css/jquery.mobile-1.0.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
Any ideas? Thanks for your input.
You are hosting the CSS locally which means you need to also host the CSS images locally.
Either use the jQuery CDN for your CSS which will also use the CDN hosted images or make sure you have an image directory under your css directory: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
There should be an images directory under your css directory with the following files:
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png

Resources