We Keep Coding

Is it possible to use an SVG Sprite map in Storybook react?

I have a react build that has a npm run dev tast and a npm run storybook. My dev task uses the index.ts as you would expect, however storybook (my the looks of things) bundles up packages for each story found.
My problem is that my entry file uses SVG go to create and import a sprite map of SVGs that are in a specific folder
import './styles/main.scss';
import './App';
import svgxhr from '../node_modules/webpack-svgstore-plugin/src/helpers/svgxhr';
const __svg__ = {
path: './media/img/svg/*.svg',
name: 'sprite-store.svg',
};
svgxhr(__svg__);
So when i view my components that reference my svgs like so...
<svg>
<title>{title}</title>
<use xlinkHref={reference}></use>
</svg>
It displays them but only when using the npm run dev task because thats where is gets imported.
Is there anyway i can do with Storybook - been looking online for a while and i cant find anything that helps.

So after a brain slapping day of trying to figure this out i did the following...
In my main webpack config I used SvgStore plugin (spritemap.ts). This configures the nature of how you use the sprite map i.e reference="icon-logo" and the output file.
module.exports = () => {
const plugins = [
//..
new SvgStore({
name: 'sprite-store.svg',
prefix: 'icon-',
}),
//...
];
return plugins;
};
I then created a new TS file with the svgxhr svg import asynchronous into the project.
Now this was all lovely and working in dev but when we included it into storybook it went t*ts up because it uses it's own webpack config.
Through trail and error i decided to do the following...
in ./storybook/webpack.config.js - I injected the spritemap.ts into the entry files to pull in the generated sprite map into the build so we can still use sprite map referencing
config.entry.push(
path.resolve('./src/spritemap.ts'),
);
Inject the svgstore plugin into plugins to generate the spritemap
config.plugins.push(new SvgStore({
name: 'sprite-store.svg',
prefix: 'icon-',
}));
Just thought i would put this there as I couldn't find any answers around.
Hope this helps

Why img path works but not with path.join?

Using React 16.13.1, I have the follow class:
import React from "react";
const path = require('path');
class Portrait extends React.Component {
render() {
const vikingName = this.props.name.toLowerCase(); // Expected output of "ulf"
return (
<div>
// below img tags go here
</div>
)
}
}
export default Portrait
I'm trying to have a the src prop of the img tags be dynamic, so when the parent component calls it, it passes the name of the viking. The file directory is name-spaced.
This works:
<img src={require('../../../../res/img/ulf/picture.png') />
Error: "Module not found at '../../../../res/img/ulf/picture.png'
<img src={require(path.join('../../../../res/img', vikingName, 'picture.png'))} />
Error: "Module not found at '../../../../res/img/ulf/picture.png'
<img src={require(`../../../../res/img/${vikingName}/picture.png`)} />
When this.props is loading correctly, (this.props.name gives expected output) and all types are String and print the correct, same path, why do the bottom two do not work?

The problem isn't your code itself. The problem lays a little deeper in how Webpack bundles your code.
Webpack bundles your code and assets and creates an entirely new folder structure and/or filenames.
Webpack will turn a folder structure like this:
src
- app.jsx
- components
- - MyComponent.jsx
- assets
- - image.jpg
into:
dist
- main.js
- image.jpg
The whole point about imports/exports is that they are static. Webpack will change all your paths behind the scenes to point towards the newly created bundled path during it's bundling process. That's why your first example works smoothly. That path has been defined before runtime, so before webpack bundles your code.
However...
Dynamic imports which are updated at runtime point towards a path which doesn't exist in your bundled code. That's why it throws an error that it can't find your file. Because there simply is no such file at that location in your bundled code.
Luckily there is a workaround for this issue
How to solve this:
It's possible to access the files path relative to your bundle using require.context. This allows you to parse your relative path to the bundled path and dynamically update your images.
This answer should be able to set you on your way.

importing images locally in react

I am not understanding how import works in React. I'm currently using create-react-app. I have a folder inside components folder named images:
- src
- components
- images
Insides the components folder I also have a js file named ProductSquare.js.
I am trying to import a picture from images folder using this line
import bumper from './images/bumper1.png';
I have tried changing it to only bumper1.png and many other options. What am I doing wrong here? ( would appreciate a better way to do it in the future).
Is this how programmers import pictures in the real world?

Try using <img src={require('./images/bumper1.png')} />
P.S.
The similar question goes here

If you are using something like Webpack (which create-react-app does) then yes, you can just import the images (and most other file types). They end up getting converted into something (I believe images end up as a data URL).
If your folder structure looks like this:
src
components
ProductSquare.js
images
Then you should be able to use the image like this:
// in ProductSquare.js
import React from 'react';
import bumper from './images/bumper1.png';
class ProductSquare extends React.Component {
render() {
return <img src={ bumper } />;
}
}
If it isn't, double-check that all of the files are named what you think they should be (check for typos and what not).
If everything is correct and it isn't working, try just adding console.log(bumper) before the class. Then:
if it outputs a string that looks like data:blahblah it should work
if it outputs undefined, the image may not be named properly
if it doesn't output, you might not be using ProductSquare correctly

Using the public Folder
Note: this feature is available with react-scripts#0.5.0 and higher.
Create a folder in public folder, for example, 'image', add your photos there.
After that wherever you want you can use image address like this:
<img className="img1" src="/image/pic.jpg" alt=""/>

You Need to use .default after require
<img src={require('./images/bumper1.png').default} />

How to reference static assets within vue javascript

I'm looking for the right url to reference static assets, like images within Vue javascript.
For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found):
Main.vue:
var icon = L.icon({
iconUrl: './assets/img.png',
iconSize: [25, 25],
iconAnchor: [12, 12]
});
I've tried putting the images in the assets folder and the static folder with no luck. Do I have to tell vue to load those images somehow?

For anyone looking to refer images from template, You can refer images directly using '#'
Example:
<img src="#/assets/images/home.png"/>

In a Vue regular setup, /assets is not served.
The images become src="data:image/png;base64,iVBORw0K...YII=" strings, instead.
Using from within JavaScript: require()
To get the images from JS code, use require('../assets.myImage.png'). The path must be relative (see below).
So your code would be:
var icon = L.icon({
iconUrl: require('./assets/img.png'), // was iconUrl: './assets/img.png',
// iconUrl: require('#/assets/img.png'), // use # as alternative, depending on the path
// ...
});
Use relative path
For example, say you have the following folder structure:
- src
+- assets
- myImage.png
+- components
- MyComponent.vue
If you want to reference the image in MyComponent.vue, the path sould be ../assets/myImage.png
Here's a DEMO CODESANDBOX showing it in action.

A better solution would be
Adding some good practices and safity to #acdcjunior's answer, to use # instead of ./
In JavaScript
require("#/assets/images/user-img-placeholder.png")
In JSX Template
<img src="#/assets/images/user-img-placeholder.png"/>
using # points to the src directory.
using ~ points to the project root, which makes it easier to access the node_modules and other root level resources

In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL.
computed: {
iconUrl () {
return require('./assets/img.png')
// The path could be '../assets/img.png', etc., which depends on where your vue file is
}
}
See VueJS templates - Handling Static Assets

Right after oppening script tag just add import someImage from '../assets/someImage.png'
and use it for an icon url iconUrl: someImage

this finally worked for me, image passed as prop:
<img :src="require(`../../assets/${image}.svg`)">

What system are you using? Webpack? Vue-loader?
I'll only brainstorming here...
Because .png is not a JavaScript file, you will need to configure Webpack to use file-loader or url-loader to handle them. The project scaffolded with vue-cli has also configured this for you.
You can take a look at webpack.conf.js in order to see if it's well configured like
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
...
/assets is for files that are handles by webpack during bundling - for that, they have to be referenced somewhere in your javascript code.
Other assets can be put in /static, the content of this folder will be copied to /dist later as-is.
I recommend you to try to change:
iconUrl: './assets/img.png'
to
iconUrl: './dist/img.png'
You can read the official documentation here: https://vue-loader.vuejs.org/en/configurations/asset-url.html
Hope it helps to you!

It works for me by using require syntax like this:
$('.eventSlick').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
arrows: true,
draggable: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("#/assets/img/icon/Arrow_Left.svg")+'"></button>',

Having a default structure of folders generated by Vue CLI such as src/assets you can place your image there and refer this from HTML as follows <img src="../src/assets/img/logo.png"> as well (works automatically without any changes on deployment too).

I'm using typescript with vue, but this is how I went about it
<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default class MyPage extends Vue {
MyImage = "../assets/images/myImage.png";
}
</script>

You could define the assets path depending on your environment
const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;
<template>
<img :src="`${assets}/logo.png`"/>
<p>path: {{assets}}</p>
</template>
<script>
export default {
data: () => ({
assets
})
}
</script>
Ideally this would be inside an utils js file, or as an extended app defineProperty, like:
const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);
and will be available as:
<template>
<img :src="`${$assets}/logo.png`"/>
<p>path: {{$assets}}</p>
</template>
<script>
export default {
mounted() {
console.log(this.$assets);
}
}
</script>

load them in created, mounted or where you need them
async created() {
try {
this.icon = (await import('#assets/images/img.png')).default;
} catch (e) {
// explicitly ignored
}
and then
<img :src=icon />

Inside code you can directly require image using.
const src = require("../../assets/images/xyz.png");
Or
In order to dynamically load image need this.
const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
};

ReactJS and images in public folder

Im new in ReactJS and I want to import images in a component. These images are inside of the public folder and I do not know how to access the folder from the react component.
Any ideas ?
EDIT
I want to import an image inside Bottom.js or Header.js
The structure folder is:
I do not use webpack. Should I ?
Edit 2
I want to use webpack for loading the images and the rest of assets. So in my config folder I have the next files:
Where I need to add the paths of the images and how?
Thanks

You don't need any webpack configuration for this.
In your component just give image path. React will know its in public directory.
<img src="/image.jpg" alt="image" />

To reference images in public there are two ways I know how to do it straight forward.
One is like above from Homam Bahrani.
using
<img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />
And since this works you really don't need anything else but, this also works...
<img src={window.location.origin + '/yourPathHere.jpg'} />

the react docs explain this nicely in the documentation, you have to use process.env.PUBLIC_URL with images placed in the public folder. See here for more info
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- It's good if you use webpack for configurations but you can simply use image path and react will find out that that it's in public directory.
<img src="/image.jpg">
2- If you want to use webpack which is a standard practice in React.
You can use these rules in your webpack.config.dev.js file.
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
],
},
then you can import image file in react components and use it.
import image from '../../public/images/logofooter.png'
<img src={image}/>

Create a folder in public ex.Assets and put your image in that folder and assign the folder_name / image_name in src
<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />

We know React is SPA. Everything is rendered from the root component by
expanding to appropriate HTML from JSX.
So it does not matter where you want to use the images. Best practice is to use an absolute path (with reference to public). Do not worry about relative
paths.
In your case, this should work everywhere:
"./images/logofooter.png"

Simply Use
<img src='/image.extension' />
React will automatically point toward the public directory

You should use webpack here to make your life easier. Add below rule in your config:
const srcPath = path.join(__dirname, '..', 'publicfolder')
const rules = []
const includePaths = [
srcPath
]
// handle images
rules.push({
test: /\.(png|gif|jpe?g|svg|ico)$/,
include: includePaths,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name]-[hash].[ext]'
}
}
After this, you can simply import the images into your react components:
import myImage from 'publicfolder/images/Image1.png'
Use myImage like below:
<div><img src={myImage}/></div>
or if the image is imported into local state of component
<div><img src={this.state.myImage}/></div>

Try This One its easy and Simple
Don't Make Image folder in src.
Make an image folder in public.
you work in react-bootstrap install
npm install react-bootstrap
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Image } from 'react-bootstrap';
export default function Main() {
return (
<>
<Image src="/img/image.jpg/100px250" alt="bg image" fluid />
</>
)
}
Hope it's Done

here is sure and three simple way to do that...
you can make one folder in directory and access it as we do import way or
you can give direct image name in src
<img src="image__name" alt="yourpic" />
//by default react look in public folder can render image in img tag
const image = window.location.origin + "/image.png";
// if your image in public directory inside folder imagecollection than you can import it in this way
const image = window.location.origin + "/imagecollection /image.png";
<img src={image} alt="yourpic" />

A simple solution is to use paths like this /images/logoFooter.png. If the file is located directly under the public folder, do /someImage.png. You can go deeper, /x/y/z/image.png. Treat the locating part of the image as an absolute kind of location for that image.
For more information, check out https://create-react-app.dev/docs/using-the-public-folder/.

if you want to add your javascript file from public folder to react, put specific file to index.html file in public folder. Your problem will be solve.

You Could also use this.. it works assuming 'yourimage.jpg' is in your public folder.
<img src={'./yourimage.jpg'}/>