Hi I include one file in to another one in angular js.
I have folder structure like below
|__ image
|__ image.jpg
|__ top.html
|__ detail
|__ detail.html
Ex:
top.html
<img src="image/image.jpg" />
this one shows the image correctly.
I included this top.html file in detail.html
so the image not showing because of including the file one in another which is inside the folder.
If I want to call the image in detail.html then I can call like below
<img src="../image/image.jpg" />
But I included the file top.html which have the image, so the problem.
can anyone help to so the problem.
Use an absolute path : /image/image.jpg will refer to the same location wherever you are located.
An absolute path will begin with a slash that refers to the server root.
Related
When import folder, vs-code-image i can see tips for what i want to import, in this case it's folder "images" but when i go inside folder
../src/images/
i see nothing, not a single file or image, vs-code-image inside this folder - five images with .svg, and one with .png
tried to use
<img src={require('./images/')}></img>
but still nothing...
I have my images folder under public folder. I use it in jsx like this:
<img src="/images/twitter.png" alt="twitter" />
This works.
But I have a problem in CSS's url.
background-image: url(/images/twitter.png); // compiler can't resolve this file.
The above doesn't work now. How do I make this work? I am not using webpack and don't want to use it for now.
Where is your css file located?
Is it in the same folder since you are writing the route identical to your code?
Answer: Check the route of your img.png relative to your css file. It can be the only problem.
Before i added the id of the object to the url the images loaded fine but once i added the ID The local images are not loading but url images work. Everything is returning fine in the console and it is the correct pathname.
I have tried using require but it just gives me a huge error with all of my images and some css.
I expect the corresponding image to show
This how the image file looks in my data
img: "img/product-8.94-1.png",
< img src={require(`../${img}`)} className="img-fluid"
alt="product"/>
This is the route and Link ( i added id)
<Route path="/details/:id" component={Details} />
<Link to={`/details/${id}`}>
Probably you are using relative paths to images in your app, if you changed route path from http://demo.com/details to http://demo.com/details/id the image cannot find the correct path, you got one extra folder details/id.
You don't show as how you get the path to the image, but if your image is in your assets folder of reactjs app, then import it like a component.
import img from "assets/image.jpg";
and then in component add it img src tag like this:
<img src={img} className="img-fluid" alt="product"/>
If you get images from db, then make sure you use full path to the image.
https://codesandbox.io/s/priceless-ardinghelli-sp0yg
I have a basic React app set up using the Create-React-App tool.
I have an images in my images folder:
/src/img/logo.png
I am including it in one of my component JS files (let's say it's located at /src/Login.js) like this:
import logo from "../img/logo.png";
I am embedding them into my code like this:
<img src={logo} />
When I look at the rendered page, I see that the "src" attribute of this image has a data URI. How can I get the app to generate a URL for this image instead of a data URI?
Why are you importing image with import, you can directly use path or take that path in one variable and than pass it to the src like this:
var imgUrl = "../img/logo.png";
<img src={imgUrl} />
I have a Drupal 7 site with a custom sub theme based on Zen. I have a custom logo that I placed in the page.tpl.php header div. The problem I'm having is that the logo only shows up on the first "main" pages, but not "subpages". Excuse my terminology here trying to explain this. What I mean by subpages is any page that is further down the chain or occurring after the first forward slash. Below is an example of what I mean by "main" pages and "subpages". All these "main" pages are directly after the first slash after the website name. The logo doesn't show up on any pages that occur after these main pages (subpages). All my pages are made using the Pages module, however, the subpages have a path using %term, for example /support/%term or products/%term.
What am I missing and what do I need to do to make my logo in page.tpl.php show up on all pages of my site? Am I supposed to create a new page.tpl.php file for the pages using /%term?
Main pages - logo shows up:
mysite.com/about
mysite.com/products
mysite.com/support
mysite.com/contact
Sub pages - logo doesn't show up:
mysite.com/products/product1
mysite.com/support/product1-support
If I understand you correctly, the quick fix for that is to make sure your logo's path starts with '/', like so:
<img src="/sites/all/themes/customZen/images/logo.png" />
But then if path of the theme changes everything will break, so don't do this.
If you place the logo using CSS as a background, use relative URL (it is relative to the path of .css file)
Or you can do something like this in your page.tpl.php:
<img src="<?php url($directory . '/images/logo.png'); ?>" />
$directory is the directory the template is located in, e.g. sites/all/themes/customZen.
Full list of page.tpl.php variables can be found here: https://api.drupal.org/api/drupal/modules%21system%21page.tpl.php/7.x
Did you solve this?..Well, if you didn't, try with this in your page.tpl.php paste this:
<img alt="" src="<?php echo drupal_get_path('theme', 'customZen');?>/images/logo.png">
Good luck!