I am trying to set background image in ionic 3. I put my image under sssest-image folder and I am getting an error:
Error
GET http://localhost:8100/image/Static-Line-Jump-in-the-sky.jpg 404
(Not Found)
Code
body
{
background-image: url('../../assest/image/Static-Line-Jump-in-the-sky.jpg');
}
sorry i got the solution
just give id to your tag ion-content anf then always set a parth through assest/image folder like this
#welcome
{
background-image: url('../assets/image/Static-Line-Jump-in-the-sky.jpg');
}
Related
Versions:
React: 18.2.0
NextJS: 12.2.0
Simple image asset is just refusing to load when is used inside <img /> tag with src attribute set to data:image/svg+xml;utf-8,[svg data here]
When I paste this url data:image/svg+xml;utf-8,[svg data here] directly in the browser everything loads fine as expected the source image is there and all other things. The next.config has all the required image configuration and in the code for the image currently we use normal <img /> tag. The asset loads fine when its not called like svg, e.g. src="https://external-api/image.jpeg" In the network tab the response for the image is 200 all the time, but the preview shows only the svg styles with the default placeholder for missing image.
If I paste the image in THIS online encoder the image is NOT loading (behaves like in my problem), but if I copy the encoded url from the page and paste it in new chrome tab the image loads w/o any problem.
Examples:
Source image
Svg code that goes in to the src
data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1044 1054' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg opacity='.7' filter='url(%23a)'%3E%3Cpath d='M309.796 414.322 190.497 535.433 467.98 803.76l119.299-121.111-277.483-268.327Z' fill='%23000'/%3E%3C/g%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='116' y='91' width='837' height='837'%3E%3Crect width='440' height='1000' rx='220' transform='matrix(-.70604 .70817 .70746 .70675 335.664 0)' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='url(%23c)' d='M109 84h850v850H109z'/%3E%3C/g%3E%3Crect width='294.223' height='822.461' rx='147.112' transform='matrix(-.70575 .70846 .70718 .70704 228.716 325)' fill='url(%23d)'/%3E%3Cdefs%3E%3Cpattern id='c' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23d'/%3E%3C/pattern%3E%3Cfilter id='a' x='.497' y='224.322' width='776.782' height='769.437' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='95' result='effect1_foregroundBlur_3332_33632'/%3E%3C/filter%3E%3Cimage id='d' width='1' height='1' xlink:href='https://fakeimg.pl/250x300/fff000/'/%3E%3C/defs%3E%3C/svg%3E
And how is renderd in the app
What was tried:
If the image is encoded in base64 works, but with huge performace drawbacks mainly on older IOS devices.
Next config option for dangerouslyAllowSVG doesn't change anything...
I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.
I am implementing a reactjs app and in development mode everything is okey with images
<img src={`/images/logo.jpg`}></img>
But when I want to deploy my app using npm run build I tried to use environnement variable PUBLIC_URL but i have issues with loading images (js & css are loaded correctly)
<img src={`/${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
I read that the value of PUBLIC_URL can be set in package.json properties homepage (i am using create-react-app)
"homepage": "https://localhost:8080/FOO-API/REACT-APP/",
When i try to print its value
console.log('public url : ', process.env.PUBLIC_URL)
I got the right path public url : /PROJET-API/REACT-APP
But the image does not shows up and its URL is wrong
http://foo-api/REACT-APP/images/logo.jpg
the https://localhost:8080/ part is gone and FOO-API is converted to lowercase
the URL should be https://localhost:8080/FOO-API/REACT-APP/images/logo.jpg
I think the issue is first / here,
<img src={`/${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
As you can see, the result of console.log
console.log('public url : ', process.env.PUBLIC_URL)
is,
public url : /PROJET-API/REACT-APP
Which alreay contains / at the beginning.
So your URL is created as,
<img src={`//PROJET-API/REACT-APP/images/logo.jpg`}></img>
Notice that it contains 2 / at the beginning.
You just need to remove the / from beginning, like:
<img src={`${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
I have recently created a blog post using blogdown and hugo. I was able to add code folding but the code appears like regular text on the website. I am trying to display the code in a frame or something distinguishing it from the rest of the text ex:
I have tried everything but could not figure how to do it. I am guessing it has to deal something with the theme I am using. I am using Hugo Nuo.
You can find the current shape of the blog post here:
https://www.staturk.xyz/post/poll-accuracy-in-turkish-elections/
Here is the beginning of my .rmd file for the post where I am trying to display the code in a frame:
---
title: "Poll Accuracy in Turkish Elections"
date: '2018-12-25'
slug: poll-accuracy-in-turkish-elections
tags:
- Polls
- Politics
- R
categories:
- Turkish Politics
- Rstats
---
```{r, echo=FALSE}
htmltools::includeHTML("~/Documents/Personal/Projects/Blog/Turkstat/content/media/posts/header.html")
```
```{r echo = F, results='hide', message=FALSE}
library(tidyverse)
library(plyr)
library(stringr)
library(scales)
library(knitr)
```
There are two steps here - figuring out what to style and then adding the style to the theme.
Figuring out what to style
Looking at the raw html for the post (ctrl-U in Chrome), the code fragments are wrapped in a <pre class="r"><code>..</code></pre> tag set. So, we could give it a border (for instance) by adding the following to the html header :
<style>
pre.r {
border-style: solid;
border-width: 2px;
}
</style>
Adding to the theme
Looking at the theme code, the best way to accomplish this seems to be to override the head partial in themes/{theme_name}/layouts/partials/head.html. Copy that file up into the the same area of the site folder. The following commands will do the trick if you are on linux:
cd $sitedir
mkdir -p layouts/partials
cp themes/hugo-nuo/layouts/partial/head.html layouts/partial
Then edit the copy of the file to add the above style fragment.
In my Controller file i wrote the following code for attaching an image to the mail,But it gives an error
$email->attachments(array('/localhost/projname/app/webroot/img/file.png'));
It shows an error like File not found: ""
You can use the IMAGES constant to get the file path to the images folder:
$email->attachments(array(IMAGES.DS.'file.png'));
Finally I got solution for attaching Images
$email->attachments(array (
array('file'=>ROOT.'/app/webroot/img/car.gif',
'mimetype'=>'image/png'
),
));