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

React doesn't recognize Parallax.js

I am trying to install https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, the console print this error:
Warning: React does not recognize the `dataDepth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `datadepth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
This is the sample that I read for the example:
https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html
And this is the example of how to use parallax.js in react:
https://github.com/wagerfield/parallax/issues/167
This is my actual code of jsx:
import React, {useEffect, useRef} from 'react';
// #ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';
const Home = () => {
const sceneEl = useRef(null);
useEffect(() => {
const parallaxInstance = new Parallax(sceneEl.current, {
relativeInput: true,
})
parallaxInstance.enable();
return () => parallaxInstance.disable();
}, [])
return (
<div id="container">
<div id="scene" ref={sceneEl}>
<div dataDepth="1.00"><img src={Layer1} /></div>
<div dataDepth="0.80"><img src={Layer2} /></div>
<div dataDepth="0.60"><img src={Layer3} /></div>
<div dataDepth="0.40"><img src={Layer4} /></div>
<div dataDepth="0.20"><img src={Layer5} /></div>
<div dataDepth="0.00"><img src={Layer6} /></div>
</div>
</div>
)
}
export default Home;
My browser show me this!
But it doesnt have the parallax effect.
This is where u can see a demo of what I am talking about.
http://matthew.wagerfield.com/parallax/

Error: Images Array loop from another images folder in REACT

I want to make shopping app in react but i did wrong thing where i dont know.What is the error?
I want to import images and looping them according to "sku number" but i just fetch header of images. I can't see images, i can't fetch them.
<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
This is the fetch code . I have tried and i'm trying different codes for fetching but it doesn't work.
Products.js :
import React, { Component } from "react";
import a from "./a.json";
import "./styles.css";
class Products extends Component {
state = {
products: a.products
};
render() {
const productItems = this.state.products.map(product => (
<div className="col-md-4">
<div
className="thumbnail text-center"
style={{ backgroundColor: "black" }}
>
<a href={product.id} onClick={this.props.handleAddToCart}>
<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
</a>
</div>
</div>
));
return <div className="row">{productItems}</div>;
}
}
export default Products;
And the sight of folders:
And the sku numbers for matching with photo's names.
The sight of page

Try changing this line:
<img src="../src/images/{{$product.sku}}.jpg" alt={product.title} />
for:
<img src={`../src/images/${product.sku}.jpg`} alt={product.title} />
In order for you to embed Javascript into any React component, remember to always enclose your code block in {brackets}. Since backticks belong to Javascript syntax, the enclosing brackets must be added.

How to make a Dynamic dropdown done in React with SQL database

I'm building a react app using facebook's:
https://github.com/facebookincubator/create-react-app
I´m new to react and I havent done a dropdown menu before. I have read a lot in the web and I figure I maybe need to use the select and options tags?
I want to have 4 image buttons as I call Main menu (three of the buttons will be able to navigate directly to the picked page).
The last image button will show an undermenu with 12 options pages to go to.
Option Option Option Option
Undermenu
12 options
I´m unsure where I shall begin, right now I have done some coding before I knew I needed to connect it to the SQL database.
App.js:
import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import DropdownMenu from "./components/DropdownMenu";
class App extends Component {
render() {
return (
<div className="App">
<Admin />
<DropdownMenu />
<p className="TEST"> lorem imsum </p>
</div>
);
}
}
export default App;
DropdownMenu.js component:
import React from 'react';
import main_menu_home from '../images/Buttons/main_menu_home.png';
import main_menu_dragons from '../images/Buttons/main_menu_dragons.png';
import main_menu_dragon_test from '../images/Buttons/main_menu_dragon_test.png';
import main_menu_fortune_cookie from '../images/Buttons/main_menu_fortune_cookie.png';
const DropdownMenu = props => (
<header>
<nav>
<div className="dragonMenu-container">
<div className="dragonMenu">
<ul>
<li>
<img
id="Home"
className="Main_home"
src={main_menu_home}
alt="Home_button_image"
/>
</li>
<li>
<img
id="Dragons"
className="Main_Dragons"
src={main_menu_dragons}
alt="Dragons_button_image"
/>
</li>
<li>
<img
id="Dragon_test"
className="Main_Dragon_test"
src={main_menu_dragon_test}
alt="Dragon_test_button_image"
/>
</li>
<li>
<img
id="Fortune_cookie"
className="Main_fortune_cookie"
src={main_menu_fortune_cookie}
alt="Fortune_cookie_button_image"
/>
</li>
</ul>
</div>
</div>
</nav>
</header>
);
export default DropdownMenu;
Here the code just display four images which it gets from the images/Buttons folder. Maybe you don´t need so many imports and can get all the images with just a proper link to the image but I donno how to.
I think I need a global variable that pointing where all my images are so I can just have to invoke said variable to access the folder where the pictures are.
Ideas?
But back to the Dropdown problem:
I guess I need to create a table in my Sql?
But I donno how.
My problem is that I think of all things at the same time I need to do, but can´t easy myself to do one thing at the time.
I have more code for when I before fetched all from another table if you want to see that code as well.
Any questions, feel free to ask away :)
// Dragoness
UPDATED 18 sep 2019:
Right now, I have come this far:
I can now talk to the SQL database with react and print out some data from the SQL database itself. My problem now is that I just see broken images, does anyone have a solution for my problem?
What I see on the browser
My SQL database menus table with 4 columns
What I wrote in the browse tag to enter my data
Where I have MainMenu.js file and where I want the Buttons images from
App.js:
import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import DropdownMenu from "./components/DropdownMenu";
import MainMenu from "./components/MainMenu";
class App extends Component {
render() {
return (
<div className="App">
<Admin />
<DropdownMenu />
<MainMenu />
<p className="TEST"> lorem imsum </p>
<div><img src='./images/Buttons/main_menu_home.png'/> </div>
</div>
);
}
}
export default App;
fetchMenu.php:
<?php
/* This file fetches current menus . */
include_once 'database.php';
$statement = $pdo->prepare("SELECT * FROM menus ORDER BY picUrl ASC");
$statement->execute();
$data = $statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data, JSON_PRETTY_PRINT);
?>
MainMenu.js:
import React, { Component } from 'react';
import "../App.scss";
class DropDownMenu {
id: 0;
picUrl: "";
linkUrl: "";
isSubmenu: "";
}
class MainMenu extends Component {
constructor(props) {
super(props);
this.state = {
allMenus: []
}
}
fetchAllMenus = () => {
fetch("http://localhost/dragonology/server/fetchMenu.php")
.then(response => response.json())
.then(data => {
console.log(data);
this.setState({ allMenus: data });
});
}
componentDidMount() {
this.fetchAllMenus();
}
render() {
let menu = this.state.allMenus.map((item) => {
return (<div key={item.id}><img src={item.picUrl} alt="dropdownmenu_main_and_under"/> - {item.linkUrl} - {item.isSubmenu}</div>)
});
console.log(menu);
return (
<div>{menu}</div>
);
}
}
export default MainMenu;
Thank you in advance
// Dragoness
Updated 19 sep 2019 with solution
I got some tips from those links:
I changed my images folder to be in the public instead of in src:
getting broken image in React App
Started to see a pattern that most of the tables with an image inside have some kind of "name" column, at least it worked for me:
https://www.youtube.com/watch?v=lTyks6s6b6E
All my success steps I took:
Fixed:
1. I added a folder called images inside the public folder.
2. Added one image of the main menu that I called home.
3. Went to the SQL database, deleted the old rows I tried to display the
data from that you can see on the browse tab that was inside the table
menus.
4. Added another column called picName. Took it as a varchar with 60 in
lengh.
5. Changed the settings on the picUrl to be a varchar with the lengh of
255 instead of 100 that I had before.
6. I did a test using the insert tab selection to add a row with the image
link I had before with the dot dot slash and it worked!.
7. Added 15 more rows(all main and undermenu buttons with its data).
8. After that I changed the folder structure again to have images/Buttons
and added all the button images that I had inside the src folder before.
9. Deleted all the images that were on the old folder.
10. Fixed: App.js took away the import of the DropDownMenu.js component and that it didnt print out my DropDownMenu.js component anymore.
App.js:
import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import MainMenu from "./components/MainMenu";
class App extends Component {
render() {
return (
<div className="App">
<Admin />
<MainMenu />
<p className="TEST"> lorem imsum </p>
<div><img src='./images/Buttons/main_menu_home.png'/> </div>
</div>
);
}
}
export default App;
I couldn´t add the images of how my SQL database look now instead of before/where I find my images now in what folder because am new in Stack Overflow and don´t have enough reputation apperely. But those above are the steps I took to solve my problem :)

custom paging slider missing config file for react.js

I am creating the custom paging slider from https://react-slick.neostack.com/docs/example/custom-paging/ I copied the code directly from the website and follow the instructions and installed the packages. When i try to run the code though i get the following error:
./src/Carousel.js
Module not found: Can't resolve './config.js' in '/Users/mcoe/Documents/Code/my-app1/src'
Code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Style from "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Slider from 'react-slick';
import { baseUrl } from "./config.js";
export default class SimpleSlider extends React.Component {
render() {
const settings = {
customPaging: function(i) {
return (
<a>
<img src={`${baseUrl}"Random1${i + 1}.png`} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
</Slider>
</div>
);
}
}

It looks like the component just wants a base url from a config file. The baseUrl needs to be the url path of your images. A relative path should work so if they are stored in my-app1/public/images/ you should be able to create a file config.js in the src directory like this:
//config.js
export const baseUrl = 'images/';

What it looks like currently, works. have not gotten the arrows to appear or images to appear in the dots underneath