I developing a SPA with https://openweathermap.org/, so i display img with
<img src={`http://openweathermap.org/img/w/${data.weather[0].icon}.png`}/>
Instead of this, i want to display another image from my local folder.I have created utils folder with index.js and another folder named weatherIcon with icons in .svg
index.js i have
export const getWeatherIcon = (icon) => (/weatherIcon/${icon}.png)
in component i change
but nothnig display in app.
Question is: How display local image instead Api image
There are different ways to use images in a React Project. Since, React follows Component architecture we have flexibility in React.
So we can represent image (if it is an SVG image) As a React Component,and import and use it directly, or we can first import an image and use it in img tag's src attribute.
Please refer to watch this article to understand better and use a approach better suiting your needs.
betterprogramming.pub/how-to-display-images-in-react
Note: Sometimes in NextJS projec, I observed that we have to use React Component approach when using SVG. Also, we can use images in our public folder if they are .png, or .pneg etc and directly use absolute path to show them.
my solution
i crated new constance
const WeatherIcon = {
"01d": "/icons/01d.svg"
}
then then import to component,
import{ WeatherIcon }from "utils/index";
and use in Img tags
<img className="weather_icon" src={WeatherIcon[data.weather[0].icon]}/>
thx for helping
Related
I've got an Astro project using markdown content collections for blog posts. In these posts I have svg images referenced as so:
This shows the SVG inside of an <img> tag but I want to inline the SVG in these scenarios. This is where the rehype-inline-svg plugin is supposed to help me. But when I add the plugin into my Astro config, I get an error ENOENT: no such file or directory, open '/assets/images/image-1.svg'
I have tried several paths to reference this image, but none work. I figure at the very least, the path should stay the same. I am not sure what else to do to get this to work. My Astro config is as follows:
import { defineConfig } from 'astro/config';
import inlineSVG from '#jsdevtools/rehype-inline-svg';
export default defineConfig({
markdown: {
rehypePlugins: [inlineSVG]
},
});
My original goal was to display Excalidraw SVGs with the font. Fonts need to be embedded if contained within an <img> tag so I am trying this inline approach. I would be happy to know if you have a good automated technique for achieving this too.
In your case, is /assets/images/image-1.svg in your public/ directory? Looking at rehype-inline-svg’s code it looks like it tries to resolve SVG paths relative to the root of the project, so you might need to include public/ in your Markdown somewhat unusually:
hey guys i have sime markdown (mdx) files that i want to use an svg with. i know that rendering dynamic ANYTHING in gatsby can be tricky.. with gatsby image you often have to filter out the right results. but for svgs specifically i m wondering how i render them dynamically depending on frontmatter in my markdown. i tried doing an <img src={svgpath} /> to no avail. and right now my svgs are beng imported as components using this in my config:
"gatsby-transformer-sharp",
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/
}
}
},
i dont know of a way to dynamically import files nor dynamically render the appropriate svg that matches the name in the markdown. here is as an example of the frontmatter in my markdown:
---
title: Pediatric Dentistry
slug: pediatric-dentistry
svgPath: '../images/assets/dental.svg'
---
how can i do something that dynamically shows the correct svg in my template file for each specific markdown file? i can dynamically render png, jpg, etc but becuase of svgs specific need to be imported as a component using transofmrer-sharp in gatsby im struggling. thanks in advance!
One thing that comes to my mind is to create a kind of map, a key-value pair that imports your desired component. Something like:
import Dental from '../images/assets/dental.svg';
import OtherSvg from '../images/assets/otherSvg.svg';
import OtherLogo from '../images/assets/otherLogo.svg';
const SVGMapper = {
'dental': Dental,
'otherSvg': OtherSvg,
'otherLogo': OtherLogo,
};
export default SVGMapper;
And so on...
Then, to render it from your markdown, you just need to:
let SVGComponent = SVGMapper['dental'];
return <SVGComponent />;
You can make it dynamic using a loop or whatever you want.
You can even change the key (dental, otherSvg and otherLogo) for the path if needed. The approach is exactly the same, you will need to change the key for your SVG path and render SVGMapper[svgPath]
Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="#Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?
Basically 2 steps
Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1
ca. like this
<div>
#Html.Raw(System.IO.File.ReadAllText(fileName)
</div>
Some examples of how to do this can be found below
Using the fetch API
How to convert image (svg) to rendered svg in javascript?
Older methods such as XMLHttpRequest or jQuery
Include SVG files with HTML, and still be able to apply styles to them?
Using D3
(Embed and) Refer to an external SVG via D3 and/or javascript
Using a custom JS library
One example: SVGInjector
Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View.
https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123
And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.
I got in trouble during developing react. I use
<img src="example.svg">
Or using module 'react-inlinesvg' to embed the svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
i want to manipulate the<g>node of the svg file directly in react, add and remove class(ps: it's quite easy in JQuery). I tried to get the ref of the element but failed. what should i do?
There are 2 options:
Use some kind of query selectors;
User react for writing SVG;
I would recommend you using 2nd approach. If you want to manipulate your own SVG, you can just write them in React as a component and work as you work with other React components.
Here you can see a list of supported elements in React.
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');