I am using a relative path to display some images. I want to dynamically load a certain part of the path from my database (essentially a number like so:
'../../assets/img/pictograms/${this.state.pictoNumber}.svg'
Which works fine.
Now I want to insert that string as my src for an image component - I am using a custom one called FittedImage but hopefully that will not cause any issues - like so:
<FittedImage fit="auto" src={'../../assets/img/pictograms/${this.state.pictoNumber}.svg'} />
This however results in no image being displayed whereas this works:
import img from '../../assets/img/pictograms/1.svg'
**** .... ****
'../../assets/img/pictograms/${this.state.pictoNumber}.svg'
Can someone explain why and propose how to solve this?
Related
I'm creating a game with sprays but I can't put all the sprays in the same folder because at least 50/ 100 and more are comming and I want to import all the images from a folder, the problem is that the name is variable.
Example :
import * as JhonImgs from "../images/Jhon/"
import * as JhonImgs from "../images/Lucas/"
Or something like that. All the images have the same extension, .png.
The problem is require.context() doesn't allow me use variables. And I can't call one by one, or use a cdn server.
Thanks.
I know there are several options where to store and how to serve images in react.
two options are:
store the image in public folder and then use it like this:
<img src={process.env.PUBLIC_URL + '/someImage.jpg'} />
store the image somewhere else in the project, import it and use it like this:
import image from '../../assets/images/someImage.jpg'
<img src={image} />
I need now to create an img tag with srcSet with few images that the correct size will be shown according to screen width.
In order to avoid adding many lines of code (4 or 5 sizes for each image) for importing the images as I do today (I am using the second method as described above), I think maybe to move them to the public folder then I wont need to import many versions and also mention all those versions in the srcSet.
My question is
what will be the differences between serving images using the first vs the second methods I wrote above?
and which option will you work with?
in case you have many images and want to set srcSet with few versions to each image?
So Im building a Reactjs project (still learning) and I was wondering if its possible to define a constant that can then be used in other files to determine file locations. eg:
IMG_ROOT = /images/
I could then use this whenever importing an image. eg:
import IMG from IMG_ROOT + filename.jpg
Is this possible?
I'm making a website in drupal 7 and need some help.
I created a content type called Itenary where user will upload information and five images.
The images I have taken as Image1, Image2.... Image5 as fields of type image pf the itenary content type.
Now I wish to show these images as something like this
So I go to the views module -> add new view
Now when I had tried this before, I had selected
Show content of type itenary
And it didn't work as I hoped.
So this time, I chose
Show File of type Image
I hope this is the right option for my need.
Then I went to create a block, gave it a name.
Now my dilema is how do I bring those fields of Image1 Image2 .. Image5 into this block ?
The fields it shows by default are related to files and not the field of my content type.
Make sure you have the following steps checked.
1- Try to download jQuery cycle plugin.
2- Create a folder a new folder sites/all/libraries/jquery.cycle and place jquery.cycle.all.js file inside it.
3- Go and test the results :).
Hope this works... Muhammad.
I have a fragment of html which is contained in a property of a templated EPiServer page, within that html there is an img tag which has a relative url in it.
When the page is viewed, I can see the src attribute of the tag has been altered to have the prefix /ProjectName/Templates/Pages/.
I understand that this is being done by HtmlRewriteToExternal so that image files that are stored alongside the aspx template (which does indeed live in Templates\Pages) are located correctly, however the image which is intended to be part of the html fragment is in my case actually stored under PageFiles/nnn/ (where nnn is actually the parent page's PageFolderID), and I need to somehow make the altered html reflect that.
I've created a class that inherits from FriendlyUrlRewriteProvider and registered my class. I can debug the application, and watch the requests go through the overridden methods, but I still can't see where the prefix is being added or get any idea how to change it. I can alter the src tag to a different relative path in my class, but the prefix is still being added.
I've read everything I can find on the EPiServer url rewriting, but can't find anything that hints as to where this prefix is being added or how to stop that or change it.
Things I've read:
http://blogs.interakting.co.uk/post/File-Extensions-and-URL-Rewriting-in-EPiServer.aspx
http://blog.fredrikhaglund.se/blog/2008/05/07/disable-episerver-urlrewriter-interference/ (this may contain the answer I'm looking for)
http://labs.kaliko.com/2010/11/prevent-episerver-urlrewrite.html
http://sourcecodebean.com/archives/episerver-friendly-urls-for-paginated-pages-and-why-the-asplinkbutton-must-die/510
http://tedgustaf.com/en/blog/2008/7/create-a-custom-url-rewrite-provider-for-episerver/
http://tedgustaf.com/en/blog/2011/4/publishing-plain-html-pages-in-episerver/
http://sdk.episerver.com/library/cms5/Developers%20Guide/Friendly%20URL.htm
http://sdk.episerver.com/library/cms6.1/html/T_EPiServer_Web_UrlRewriteModule.htm
http://labs.episerver.com/en/Blogs/Ruwen/Dates/111218/112064/112154/
http://world.episerver.com/Blogs/Magnus-Strale/Dates/2011/3/Do-we-really-need-yet-another-HTML-parser/
http://world.episerver.com/Blogs/Yugeen-Klimenko/Dates/2011/6/How-EPiServer-URL-Rewriting-works/
http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=46869
I'm open to completely different solutions for what I'm actually trying to achieve, which is as follows:
I have multiple independent sets of static html files and related image / css / js files, which I'm trying to store / publish with EPiServer. The structure of each set looks something like
setfolder/
htmlfileA.html
htmlfileB.html
css/
styles.css
images/
piccy1.png
piccy2.png
js/
magic.js
I've figured that I should create an EPiServer page for the set, and then child pages for each html file, storing the html from the files in a property of the child pages. Currently I'm storing the related static files in the PageFiles of the relevant setfolder page, as that seems to be the most logically consistent place to put them.
It's hard to give the best solution without seeing it all infront of you. But one easy way is to alter the HTML-code when you print the property to the page.
Like <%= ChangeRelativeLinks(CurrentPage["HtmlCode"] as string) %>
And in the ChangeRelativeLinks(string htmlCode) you do a regexp or similar that changes relative links and images to the pagedir as an absolute path.
If you are storing the images in PageFiles which is a Virtual Path Provider you should be able to get the url to your file simply by using the API. On the PageData class (ie CurrentPage in your template) you have a method called GetPageDirectory() which gets the page folder.
You can read more about VPP concepts here:
http://sdk.episerver.com/library/cms6.1/Developers%20Guide/Core%20Features/File%20System/File%20System%20and%20VPPs.htm
No need for a url rewrite provider for this I think.