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")
Related
I'm having some trouble getting images to work after my app is deployed to AWS Amplify. I created a pretty simple app that consists of just HTML, CSS and JS files (no angular/react/flutter etc.). My folder structure is currently:
- .html files
- styles.css
--- scripts
|___app.js
|___config.js
|___aws.js
--- images
|___image1.PNG
|___image2.PNG
|___image3.PNG
|___image4.PNG
In my app.js file, I've got a few dynamic image creations setup in the same way (just different variable names and image files):
var image = document.createElement('img');
image.src = '../images/image1.png';
image.addEventListener('click', myFunction);
image.style.cursor = 'pointer';
Specifically the image.src line; I've tried different combinations such as:
image.src = '../images/image1.png';
image.src = './images/image1.png';
(one suggestion I found said to remove one of the periods (not sure why))
image.src = '/images/image1.png';
(placing the images folder inside the scripts folder)
image.src = 'image1.png';
(placing the actual images at the same level as the scripts)
I've even tried placing the images in an S3 bucket, and then using #3 add an image rewrite as described here: AWS Rewrite/Redirect Documentation.
No matter what I try, after pushing my code to GitHub and then after my AWS Amplify app finishes building the code, when I go to website, all the images are showing as if they couldn't be found and the dev console always shows something along the lines of Image could not be found. The server returned with: 404 Could not be found error.
The code works perfectly fine and the images show up on my local machine when I open the Live Preview using either Brackets.io or VS Code, just not when deployed to Amplify.
I've also tried setting up in the Amplify console the Rewrites and Redirects as it mentions in this Github forum: Github Forum but to no avail. My current Rewrites and Redirects section of the Amplify console effectively look like what's shown in the first link.
I've got to be missing some kind of setup to get this working but I'm not sure what it is. Hopefully it's a simple fix and I don't need to effectively re-do the project some other way.
Thank you in advance for any assistance.
I figured it out. I decided to try and use GitHub Pages instead to see if the same problem occurs there and it does. I did some research on why it wouldn't show up there and I found this article: GitHub Pages Stackoverflow which basically says that the filename, extension and folders are all case sensitive. I didn't think that AWS Amplify would have this problem but it does.
My files had .PNG as the file extension but in the code I used .png. After changing it in the code and re-deploying, it worked.
I recently posted Background image not showing with CSS and thought it has to be something with the url I included even though I was sure it was correct (they were in the same directory so it was straightforward). I wasn't able to resolve that issue and now, I face the same issue but for a .js file.
Picture of work space:
Picture of the Run prompt:
.
In app.js I do have require('./like_button');. I am new to using these technologies, I must be missing something general...
You have to serve the static file from a specific folder. In your case views.
Add this line where you've declared your app.
app.use(express.static('views'))
For more reference check out
http://expressjs.com/en/starter/static-files.html
I have an ng-repeat that, among other thing, outputs on image:
<div class="installation" get-products install-index="{{$index}}" ng-repeat="installation in installations track by $index">
...
<img ng-src="{{installation.logo}}" />
...
</div>
When my app starts it downloads needed images and stores their location in a local database. When the page is viewed the installations are populated:
<div class="installation ng-scope" ng-repeat="installation in installations track by $index" install-index="43" get-products="">
...
<img src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png" ng-src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png">
...
</div>
(dots used to hide person and client data)
If I paste the src location into my browser I see the image so I know it's saved at that location. However, in my app it's not showing. This is a constant issue through the app with the downloaded files. I know the image are in the correct area and the src location is correct but none of them show.
--- EDIT ---
I do have white listing applied as I was getting an unsafe for file:///. Also, when I was using a relative path it was working fine. I had a preloaded database that pointed to file inside the app files.
I don't think it's an access issue since I have a .db file at the same location that all my data is being pulled from.
--- EDIT ---
I set it as file:///C:/... and I'm having the same issue.
I also tried file:///C:/... , http://localhost/..., http://localhost:/..., http://localhost:C/..., C:/..., and file:///.... None of witch give me anything. The first two localhost items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it.
You can do this in two different ways:
1) Use the file protocol
2) use a local host server to store the picture and access it from the local host
for security reasons you cannot use your file system path for images. you shouldn't even use it at all, because when your app gets hosted, you wouldn't be accessing the image via such paths.
method 1:
just add file:/// in place of the c:/. file is the protocol for your file system, just as http or HTTPS is a web protocol.
NB: I haven't tested or used this before so I'm not really certain. I'm posting this from a small mobile device. but I believe it should work.
method 2:
start your wampserver or python server or any local server you have. put the image in a folder where your server can access (if wampserver, this would be a folder or directory in your WWW). say the name of the folder is "my_images" and your wampserver is running on localhost.. you can access the image like so:
http://localhost/my_images/image_name
use this path for your ng-src.
Because I Cordova File and Windows weren't playing nice using the call for cordova.file.dataDirectory didn't work. Instead I used the fs object returned by window.requestFileSystem(...,function(fs){...});
When generating my save to path as well as the path to create directories and location data I used fs.winpath which returned C:/.... The web (which Cordova basically is) won't allow you to have access to local files not associated with the site/apps structure, which is now obvious.
I dug in to the fs object and found fs.root.nativeURL points to ms-appdata:///local/. Switching everything over to this still downloaded all files and directories to the same location but stored that to the database as the file location. When the app loaded the ms-appdata path instead of the C:/ path the images displayed.
oh, a Cordova app.. why don't you place the file in an images folder In your project. since all files will be loaded using index.html (I assume). you can easily refer to the file relative to the location of index.html. how I would normally organize my project is that, my index.html and folders containing resources like js, CSS etc would be on thesame level, so I can easily get the image files using ng-src="img/image_name". so I could have a structure like this
index.HTML
img
..image_name.ext
..image2.ext
css
..style.css test it in a browser location if it works, it will work on the device. Cordova would know how to translate d into something it can recognise.
This is some sample code, i quickly put together. I tested it and it worked. Firstly i create a directory using file plugin and then download to this directory using file transfer. Replace the url parameter of file transfer with the url you wish to download from.
$ionicPlatform.ready(function() {
$cordovaFile.createDir(cordova.file.externalDataDirectory,
file_location,false).then(
function(success){
return success;
},function(error){
return error;
}).then(function(value){
var url = material.file_uri;
var targetPath = cordova.file.externalDataDirectory
+ "/" +file_location + "/" + file_name;
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
console.log(result)
}, function(err) {
console.log(err)
}, function (progress) {
$timeout(function () {
console.log(Math.floor((progress.loaded / progress.total) * 100));
})
});
})
})
I have a spring based web application MyWebapp built using maven and deployed on Websphere 6.1
The folder structure is:
MyApp --> src ---> main --->
The main folder is further having resources and webapp folders.
webapp folders is having other folders like images, theme, jscript, JSP, META-INF, WEB-INF
images folder is having icons folder with say example.png
So fetching example.png on localhost as:
http://localhost:9080/MyWebapp/images/icons/example.png
succeeds.
In jscript folder I have a sample.js javascript file where some functions are defined.
I am importing this javascript file in JSP pages as:
<script src="<%=request.getContextPath()%>/jscript/sample.js" type="text/javascript" language="Javascript"></script>
This javascript file is having a function which tries to fetch image as below:
iconFile = '../images/icons/search_result.png';
anchor.style.backgroundImage = 'url(' + iconFile + ')';
anchor.style.backgroundRepeat = 'no-repeat';
anchor.style.backgroundPosition = '1px 2px';
anchor.className = 'toplevel-tab';
The complete function basically tries to place a icon before some text in JSP.
The code gets parsed. However, the image does not get displayed.
Running the code independently on a simple html with the png images in the same folder as html and javascript files succeeds. Here i will just have iconFile = "search_result.png"
So, it is not code issue.
Issue is that the image is not getting located or the server is unable to find the image in above javascript code.
What am I doing wrong ?
How can I solve it ?
The answer for https://stackoverflow.com/a/8298652/887235 which I accepted earlier does not work.
So please do not downvote this question as a duplicate one.
Also I am working on restricted environment where access to programs like Tail will not work.
Changing
iconFile = '../images/icons/search_result.png';
to
iconFile = '/images/icons/search_result.png';
also does not work!!
Thanks for reading!
You just have to understand how relative paths work. Even if the path is in a JavaScript file, the path is not relative to the location of this JS file, but it's relative to the URL of the HTML page being displayed in the browser.
So, if the URL of the page executing this javascript code is
http://foo.bar.com/myWebApp/zim/boom/tchak.html
and the URL of the image is
../images/icons/search_result.png
The absolute URL of the image will be
http://foo.bar.com/myWebApp/zim/boom/../images/icons/search_result.png
which is the same as
http://foo.bar.com/myWebApp/zim/images/icons/search_result.png
An absolute path like /images/icons/search_result.png is also resolved from the root of the web server, and not the root of the webapp (the browser doesn't know what a Java webapp is and doesn't care). So it's resolved as
http://foo.bar.com/images/icons/search_result.png
You would need to prepend the context path to the path to make it really absolute:
<%=request.getContextPath()%>/images/icons/search_result.png
or, without scriptlets:
${pageContext.request.contextPath}/images/icons/search_result.png
You need to give your javascript an awareness of the path to the root of your application, as this will change on context. Start by declaring a global variable, such as:
<script>
var siteroot = "<%=request.getContextPath()%>";
</script>
Then, you are ready to use it later, such as:
iconFile = siteroot + '/images/icons/search_result.png';
here's the thing:
i built my site with SEO friendly urls...but i have problem now calling ajax files becaus eth epath is wrong and I cant set an absolute url when i call my files in background..
for instance my page is here (similar to StackOverflow..)
www.domain.com/product/123/this-is-a-product
but my javascripts functions, in folder /js,now they try to reach the files but they cant obvisouly because are set to relative path...
how can i solve this issue??
EDIT: Found this How to get the root path in JavaScript?
When you are using freindly urls, then you have to use path started with /. But then you are starting path from main path.