We Keep Coding

Loading svg in preact with vite

I wonder how can I load svg`s in preact & vite for now I have tried simple import
import SvgLogo from './test.svg'
export const Logo = () => (
<SvgLogo />
)
but I doesnt render anything.

Universal solution for multiple images.
Two files:
assets.js
main.js
assets.js :
export { default as prelogo } from '../assets/images/prelogo.png';
export { default as logo } from '../assets/images/logo.png';
main.js :
import * as assets from '../assets';
...
<div>
<img src={assets.prelogo} alt="" />
<img src={assets.logo} alt="" />
</div>

Try using the img tag:
import SvgLogo from './test.svg'
export const Logo = () => (
<img src={SvgLogo} />
)

If you want to render image with any kind of extension whether it is SVG or PNG or JPG by Importing the image, you need to use the <img/> tag.
change the code to,
import SvgLogo from './test.svg'
export const Logo = () => (
<img src={SvgLogo}/>
)
it should do the work

Optimize all blog post images with gatsby-image plugin

I am wondering if there is a possibility to enable the gatsby-image plugin for all images by default for a blog post, where I may have more than 1 image.
This is how my blog post uses images:
A featured image, which is a part of frontmatter (and I am able to manage through a GraphiQl query)
And all other images of a blog post are inlined using transformer-remark-plugin
I need help with #2 to enable gatsby-image plugin for all images of a blog post.
Blogpost Template
import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/Layout"
import SEO from "../components/SEO"
const Template = ({ data, pageContext }) => {
const { next, prev } = pageContext
const { markdownRemark } = data
const title = markdownRemark.frontmatter.title
const desc = markdownRemark.frontmatter.description || markdownRemark.frontmatter.excerpt
const image = markdownRemark.frontmatter.image
const html = markdownRemark.html
console.log('image::: ',image)
return (
<Layout>
<SEO
title={title}
description={desc}
image={image}
/>
<h1 className="post-title">{title}</h1>
<Img fluid={data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
<div className="post" dangerouslySetInnerHTML={{ __html: html }} />
{next && <Link to={next.frontmatter.path}>Next</Link>}
{prev && <Link to={prev.frontmatter.path}>Prev</Link>}
</Layout>
)
}
export const query = graphql`
query($pathSlug: String!) {
markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
html
frontmatter {
title
excerpt
description
image
}
}
}
`
export default Template
Frontmatter
---
title: "Celebrity Trends Which Inspired High Street Fashion"
date: "2020-31-05"
path: "fashion/celebrity-trends-which-inspired-high-street-fashion"
image: "/img/posts/1024x768.png"
categories:
- "Fashion"
description: "Description for Celebrity Trends Which Inspired High Street Fashion"
tags:
- "celebrity"
- "hollywood"
---

Gatsby image with staticQuery

I am trying for the first time GatsbyJs and I see the feature with ImageSharp for optimizing images.
Now, I created a component and it works fine, but I would like to optimize the code to be able to add more images.
The code is organized in this manner:
I have the component images.js, import this component in the index page. In the component at this moment have 2 images (1.jpg, 2.jpg)
I would like to create two returns of a single component image, see my code of images.js component below:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Image from "gatsby-image"
const ImagesHome = () => {
const data = useStaticQuery(graphql`
query BioQuery {
imgOne: file(absolutePath: { regex: "/1.jpg/" }) {
childImageSharp {
fixed(width: 710) {
...GatsbyImageSharpFixed
}
}
}
imgTwo: file(absolutePath: { regex: "/2.jpg/" }) {
childImageSharp {
fixed(width: 710) {
...GatsbyImageSharpFixed
}
}
}
}
`)
return (
<div>
<Image
fixed={data.imgOne.childImageSharp.fixed}
/>
<div id="secondImageHome">
<Image
fixed={data.imgTwo.childImageSharp.fixed}
/>
</div>
</div>
)
}
export default ImagesHome
I would use the export component image in single code like:
<Img fluid={props.data.imageOne.childImageSharp.fluid} />
<Img fluid={props.data.imageTwo.childImageSharp.fluid} />
Will it be possible with my code? I tried some tutorials on YouTube, but it did not work.

Using require for SVG files in React Native

Im using react-native-svg and I'm fully aware of their way to use local svg files as shown here.
What I would like to know is if there is a way to use require for svg file paths. e.g.
<Svg width={50} height={50} fill={"#CCC"} source={require("./path/to/file.svg")} />
That way I would be able to store the require in a variable and use it like:
const myImage = require("./path/to/file.svg")
<Svg width={50} height={50} fill={"#CCC"} source={myImage} />
Any ideias?
EDIT FOR MORE DETAIL
Im developing a white label app so I have a config.js file with some color values, API endpoints and source images. e.g.
//config.js
const coBrandConfig = {
firstapp: {
Target: {
BRAND_TARGET: "firstApp"
},
Login: {
LOGIN_BACKGROUND_IMAGE: require("./path/to/file.png"),
LOGIN_LOGO_IMAGE: require("./path/to/file.png"),
LOGIN_TITLE_TEXT: "FIRST APP",
LOGIN_STATUSBAR_CONTENT: "light-content",
LOGIN_BACKGROUND_COLOR: "#333" ,
LOGIN_SIMPLE_TEXT_COLOR: "#FFF",
LOGIN_TEXTINPUT_BACKGROUD_COLOR: "#FFF",
LOGIN_LOGIN_BUTTON_COLOR: "#009933",
},
},
}
module.exports = coBrandConfig["firstapp"]
Then I have a styles.js that gets and applies all of these values, which can change depending on the App variant. e.g.
import React from 'react'
import { StatusBar, Image } from "react-native"
import styled from 'styled-components/native'
import CoBrandConfig from "./config/config.js"
export function MainStyle () {
return(
<>
<StatusBar barStyle={`${CoBrandConfig.Login.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={CoBrandConfig.Login.LOGIN_BACKGROUND_COLOR} />
<Image source={CoBrandConfig.Login.LOGIN_LOGO_IMAGE} />
<Svg width={50} height={50} fill={"#CCC"} source={CoBrandConfig.Login.MY_SVG} /> //HERES WHAT I WANT TO DO
<TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
</>
)
}
Thats why I would like to pass a require("./path/to/file.svg") to a variable.

I'm a bit late, but try adding .default.src after your require:
source={require("./path/to/file.svg").default.src}

I use this library, I hope it will be useful
npm install 'react-native-svg';
then
import { SvgUri } from 'react-native-svg';
<SvgUri
width="100%"
height="100%"
uri="url svg"
/>

Try this one
import SvgUri from 'react-native-svg-uri';
import svgExample from './file.svg';
return:
<SvgUri
width="250"
height="250"
svgXmlData={svgExample}
/>

Gatsby: Trying to get image path from front matter but getting this "TypeError: Cannot read property 'image' of undefined"

Im building a blog with Gatsby and I'm trying to display a hero image on each post page with the image path that is defined in each posts front matter. But, I'm getting this error from my hero component:
TypeError: Cannot read property 'image' of undefined
Here is my code:
Post front matter
---
path: /blog-post1
title: Blog Post 1
image: ../../images/blog-post-1.jpg
description: Blog post description
---
Hero.js
import React from 'react'
import Img from "gatsby-image";
const Hero = props => (
<section className="hero is-large">
<Img
fluid={props.frontmatter.image.childImageSharp.resize}
/>
<div className="hero-body">
</div>
</section>
);
export default Hero
Post.js
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import Hero from '../components/hero';
const PostTemplate = ({ data }) => {
const { markdownRemark } = data;
const { frontmatter, html } = markdownRemark;
return (
<Layout>
<Hero headerImage={frontmatter.image} />
<section class="section">
<div className="container is-medium">
<div dangerouslySetInnerHTML={{__html: html}} />
</div>
</section>
</Layout>
)
}
export default PostTemplate;
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date
path
title
description
image {
childImageSharp {
resize(width: 1500, height: 1500) {
src
}
fluid(maxWidth: 786) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`;
Any ideas on what's happening? Thanks in advance.

I am assuming you have data in frontmatter variable all the time. If you look at how you are calling Hero Component, where you are passing data as headerImage.
<Hero headerImage={frontmatter.image} />
If you look at Hero component you are reading it as frontmatter, You can do following changes and check.
You can add the condition to Img component to avoid the errors because of missing data.
{
props.headerImage && props.headerImage.image && props.headerImage.image.childImageSharp
<Img
fluid={props.headerImage.image.childImageSharp.resize}
/>
}

I figured out was the issue.
In my hero.js, I was calling the image using {props.frontmatter.image.childImageSharp.resize}
But in my post.js I was passing the data into the hero component like this <Hero headerImage={frontmatter.image} />
So, it was trying to find frontmatter.image.image, which doesn't exist. All I had to do was remove the .image like this <Img fluid={props.headerImage.childImageSharp.resize} />