I have several images in css files and js files and we ASP.Net MVC.
After deploying in the server images are getting loaded from the path
http://example.com/Images/image.png, whereas the actual is in http://example.com/mysite/Images/image.png
I have tried several paths
like
/Images/image.png
../Images/image.png
Images/image.png
../../Images/image.png.
However browser always tries to load it from the Images folder directly under the domain which does not exist.
Let say that you have following structure
MySite
MySite\Content\CSS\styles.css
MySite\Content\Images\img1.png
In styles.css
.myheader{
background-image:url('../Images/img1.png');
}
OR
In layout.cshtml or index.cshtml
<div style="background-image:url('#Url.Content("~/Content/Images/img1.png")');"></div>
OR
<img src='#Url.Content("~/Content/Images/img1.png")' />
one thing you have to make sure that it path is case-sensitive
I am using these tricks in my projects.
I hope it will help you.
Related
I have a vue-cli 3 project setup with the following directory structure:
All static assets are loaded in the public directory and are compiled and built successfully on localhost.
As seen in the image below, guyana-live-logo.png, slide-1.jpg and 970x250-ad.png are all loaded successfully, however, only the logo and the ad image appears in the browser.
What I've tried
Changing the way the image is referenced.
Original - which works for almost all other images
<img src="/img/slide-1.jpg"/>
Test 0 - this loaded the image with a hash appended (slide-1.1b0ahsa.jpg) but it still did not appear in the browser
<img src="../../../public/img/slides/slide-1.jpg">
Test 1 - using v-bind
<img :src="'/img/slide-1.jpg'"/>
Moving the image inside the src directory and the component sub-directory both of which proved futile.
Updating vue-loader
Building for production and serving only the /dist folder
Key notes
The console or my bug tracking software produces no error.
Image format doesn't seem to be the problem, some .png loads while others don't, the same is true for .jpg.
Some JavaScript files are affected. JS files are being called like this: <script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script> in public/index.html
The images will need to be in the same directory or a child directory of the file in which you're trying to access them (i.e. in the Components directory).
Can you also try to access the image via its URL <img src="http://localhost:8080/img/guyana-live-logo.png" />?
This should work, but you may not want to use it this way.
Another possibility you might be able to use is doing this:
<script>
import image from './img/slide-1.jpg'
...
Then in Vue data:
data() {
return {
img: image,
};
},
Then in your HTML:
<img :src="image"/>
This solves issues when trying to access images when building with Parcel Bundler
I would like to ask for your help about localizing my apps.
I need to translate some js files. For this I use jQuery.i18n.
My problem is that I could load my external resource file.
How can I correctly specify my path to one of my resource json files ?
And I try to load my specific resource string
I tried to used ~/Scripts... also ./Scripts...
but I could not load this json file.
Thanks
Krpo
I think you're looking for a relative file path. If you provide the layout of your file structure I can help further, but basically...
Go back one folder:
../Scripts/app/Localization/Resources/i18n/sk.json
Go back two folders:
../../Scripts/app/Localization/Resources/i18n/sk.json
Go back three folers:
../../../Scripts/app/Localization/Resources/i18n/sk.json
Etc...
One of my html file needs to include a script file, as it often happens, and no matter what I do, the browser doesn't seem to get it.
following this answer: How to include css files into compojure project?
I created a public folder in my resource folder. The structure looks like this:
resources
|-public
|-views
| |-myview.html
|-scripts
|-my.script.js
Inclusion of the file in myview.html looks like this:
<head>
<script src="/scripts/my.script.js"></script>
</head>
When I request myview.html from the server I get it, but all of the types in my.script.js are unknown. The html works as expected when I just load it in the browser (I have to adjust the path to the script file to be relative, of course, and no, that doesn't work either when I request it from my server).
So how do I get my script files (and later css files) to be found by the html in a typical compojure setup?
Turns out I was just missing
(route/resources "/")
in my routing. As that wasn't the problem with the topic I looked at, I didn't figure it out for a while.
Turns out sometimes you should read the code in the question just as carefully as the answer...
My mvc5 webApp can´t seem to display images if I run it on the virtual server, however if I run it locally it works.
So I have tried several approaches and none that allowed me to run the app on the virtual server or on my pc worked I have tried:
(these worked if I was running this locally)
Images/arrow.png
/Images/arrow.png
This path works for the virtual server but not locally.
webAPP/Images/arrow.png
I know about #Url.Action but I have a lot of different images, around 15, and I don´t know if using #Url.Action is a good idea for that many.
any small example would help tremendously!
If you know the path to the images from the site root you can do the following in MVC:
#Url.Content("~/images/my-image.jpg")
The "~/" will map from the site root.
EDIT:
If you're working within a JS file and struggling with relative paths maybe you could add a 'basepath' variable to the top of the file and work with that:
var basePath = "http://www.mywebsite.com/images";
Then in your code, your image URL returned would be something like:
var imgUrl = basePath + "/my-image.jpg";
try this:
#Url.Content("~/Images/arrow.png")
I want to load a placeholder image using holder.js in a static template. In static template index.html I have:
<img src="/static/holder.js/200x200">
I have handlers set in app.yaml for serving static files in a folder called static, so I know that's not a problem, but for some reason holder.js will not generate the 200x200 image I called for (the log files generate a 404 error). I bet this is some sort of handler issue; perhaps App Engine is treating my request as a directory and cannot find it. I need to configure the app.yaml file so that it treats requests to holder.js as a parameter for the file and not as a subdirectory of the file. Can someone point me in the right direction to help solve this problem?
When using Holder.js, the src attribute isn't meant to be used as a real URI. Instead, it's used as an identifier for Holder.js (specifically the domain option). Your code should look like this: <img src="holder.js/200x200"> or <img data-src="holder.js/200x200">. Make sure to include <script src="/static/holder.js"></script> in the document as well.