I used gulp.spritesmith to make a sprite image. I imported sprite.sass into main.sass and it seems to be working except there is a problem with path to images. I know it is probably some silly mistake but I can't figure out what it is so I would be really greatful if you can help me.
Here is my gulpfile fragment
gulp.task('sprite', function () {
var spriteData = gulp.src('assets/img/icons/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.sass',
imgPath: './assets/img/sprite.png'
}));
spriteData.css.pipe(gulp.dest('./assets/sass/1-tools'));
});
I'm including image
.services-item
&-design
#include sprite($heart-services)
And these is how it works in the browser.
Here is my project structure
It's been nearly 2 years. Hope you have already solved it. AFAIK, among these options of spritesmith, **imgPath ** is the request path relative to the css file rather than the project structure of SASS/images source.
Suppose your css file containing your sprite image reference is in folder ./assets/sass/, and your image is in ./assets/img/. In this case you can try change the imgPath option to:
imgPath: '../img/sprite.png' //use .. back to assets folder, then go down to img folder
Related
I have a bunch of goods with (or without) photos.
I need to load image if it exists or show a common (like blank) image.
the stack is
Remix, Prisma and mySQL db.
Seems like storing images in mySQL is impossible (or is it?)
Also it seems like storing image path in db would be difficult in maintenance (or it is a solution? :D)
Here is what I tried:
const getPicture= (path) => {
try{
const pic = require(`~/images/categories/${path}`)
return pic;
}
catch(err){
console.log('ERROR:', err)
return noPic;
}
}
I tryed to put this code in page, tryed to put it in loader,
tryed to put pictures to a public or private folder
(without ~ in require path ofc)
when this runs in loader it says module not found (path/to/image)
when I run this in page code it says that dynamic require isn't supported.
How or how else can I achieve the goal?
I started react and js coding this January so, well, Im a noob :D
UPD:
thank you IT goldman, that was close!
Finally all works with
<img
src={'/path/in/public'}
onError={(e) => (e.target.onerror = null, e.target.src = anotherImg)}
/>
Maybe try first
<img alt='' src={ '...'} onError={this.src='https://picsum.photos/200'}/>
I'm trying out iText7 and trying to piece together how to do things. It seems that I can put in a base URI to grab external resources which I'm assuming if it finds a .css it will apply that? I have a particular situation where it's easier for me to hold the CSS in memory as a string. It seems odd that I can use HtmlConverter.convertToPdf() and pass in HTML as a string but not CSS.
As a secondary question, what happens if it finds multiple CSS files at that base URI?
Finally (sorry for the dump), if the HTML contains FQDN URLs to images, I'm assuming/hoping it will pull the images directly? In other words, I'm hoping I don't also have to store/write those images to the specified base URI?
Thanks.
UPDATE: I put together a quick demo. I found out it will download images that have a full URL which is great.
However, it does not seem to be loading the CSS file that is in a folder I specified. The code:
StringBuilder sb = new StringBuilder(File.ReadAllText("demoHtml.html"));
// this folder, which is relative to the test .exe, contains a file called pdf.css
ConverterProperties props = new ConverterProperties().SetBaseUri("Content/Pdf");
FileStream fs = new FileStream("itext.pdf", FileMode.Create);
HtmlConverter.ConvertToPdf(sb.ToString(), fs, props);
And the CSS:
img {
max-width: 100%;
}
table {
vertical-align: top;
}
td ol {
-webkit-padding-start: 15px;
padding-left: 15px;
}
thead tr {
background: #aaa;
}
tr:nth-child(even) {
background: #eee;
}
Solution to question 1:
I'm trying out iText7 and trying to piece together how to do things. It seems that I can put in a base URI to grab external resources which I'm assuming if it finds a .css it will apply that? I have a particular situation where it's easier for me to hold the CSS in memory as a string. It seems odd that I can use HtmlConverter.convertToPdf() and pass in HTML as a string but not CSS.
Many hours i have spent finding the slution for this problem. Everything seemed right and i even asked a support question about the using of CSS files. In contrary to itext5 (itextsharp), itext7 can't manage an url with a space in it.
So locally testing in a path like this: c:/Path to project/project/name/wwwroot/ won't work (note the spaces)
I didn't notice this at first because i generated my path programmatically to my css folder:
var basepath = env.ContentRootPath + "\\wwwroot\\pdfcss\\";
Changed it to:
var basepath = #"G:\some-other\directory\pdfcss\";
Solution to question 2:
Now knowing this i could solve your second question:
As a secondary question, what happens if it finds multiple CSS files at that base URI?
Nothing, you will still have to insert the links into your html in the head element. If this isn't added you will not have any css!
Solution to question 3:
And indeed:
Finally (sorry for the dump), if the HTML contains FQDN URLs to images, I'm assuming/hoping it will pull the images directly? In other words, I'm hoping I don't also have to store/write those images to the specified base URI?
You can do the following:
<img id="logo"
src="https://xxxxx.blob.core.windows.net/path/to-image-
logo.png" />
hello all experienced Sphinx users,
since a few days I'm performing my first experiences with Sphinx for building a small documentation site. I'm playing around using the Alabaster theme. When I try to place a logo in the left upper corner it only works with using an entry in the build configuration file 'conf.py' like this:
html_logo = '_static/images/PJS-small.png'
when I try to use the Alabaster theme configuration like this
html_theme_options = {
'logo': '_static/images/PJS-small.png',
'logo_name': True,
'description': 'one more logo'
}
no logo appears above the sidebar.
I'd like to use the theme configurations because I'm able to place a subtitle and other things like that.
Does anyone have an idea how to use the Alabaster configurations like it is documented?
Thank you very much for helping.
As per the Alabaster installation instructions,
you have to add an html_sidebars setting to the conf.py file:
html_sidebars = {
'**': [
'about.html',
'navigation.html',
'relations.html',
'searchbox.html',
'donate.html',
]
}
This causes Alabaster’s customized sidebar templates to be loaded.
Then you can specify the logo path like this:
html_theme_options = {
'logo': 'images/PJS-small.png',
# etc.
}
The path is automatically prepended with _static/.
In the theme configuration (theme.conf) file, you need to use the following syntax:
logo = images/PJS-small.png
logo_name = true
description = one more logo
Note the absence of the _static directory in the logo path (it is prepended in the theme's HTML template) and the lowercase boolean.
Still, you can set any theme configuration variable through the html_theme_options object in the Sphinx project configuration file (conf.py).
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
I have my index.cshtml with a image
< img id="u3430_img" src="Images/send.png">
And a folder Images inside myApp/Images folder
if i access
http:/localhost/myApp OR
http:/localhost/myApp/home/
works Ok. But if i use
http:/localhost/myApp/home/index
The page try to look for the image in
http:/localhost/myApp/home/Images/send.png
So how I should define my src.
Aditional note:
Beside the index.cshtml I also have an js file where a hover effect is add it to the image. And have same problem neither of those option work
$('#u3430_img').hover(
function () {
$(this).attr("src", "~/Images/send_hover.png");
},
function () {
$(this).attr("src", "Images/send.png");
}
);
You can reference images in the top level of the project with the ~.
<img src="~/Images/send.png">
Older versions of ASP.NET MVC needed a #Url.Content() around the path, as described here
Edit: If you want to update the path from Javascript, you can either specify an absolute path, or wrap it in #Url.Content().
$('#image').attr('src', '/Images/send.jpg');
$('#image').attr('src', '#Url.Content("~/Images/send.png")');
in Cshtml page adding ~ is not necessary.Just add /Images/send.png ...It will come to root and follow hierarchy.