I am trying to put an image in the swiper. If I reference the image from the local file, it doesnt seem to work:
but if I reference it from an external URL it does:
I have checked file location and name and they are correct. I am sure its something simple, but I cant see it. Does anybody what I am doing wrong?
According to your code, you are missing an opening quote character from your href attribute. Try
Thanks, I fixed it, but that didnt seem to be the issue. I still cant see the local image
The two dots in your URL indicate you are going up a level in order to reach your images folder. So this means your folder structure must be something like:
Is that correct? Or otherwise, if ‘images’ is a sub-folder from where you have your html file, be sure to remove the leading ‘…/’ on the path.
Also, try using Chrome dev tools to check if you’re getting a 404 on that image path.
My directory structure is as follows:
------ newpage (this is the page which calls the one.jpg which is in the images directory)
When I call it, I get this message
GET http://localhost:8080/images/one.jpg 404 (Not Found)
As an experiment, I copied the image into the same directory as the page which calls the image, but I get the same error.
This is very strange.
Based on that file structure, you need to at least change the URL of your image tag. Try
<img src="src/images/one.jpg" width="90" height="172" />
The http url you’ve provided is missing the ‘assets’ folder, so the image path should be
Thanks Kerrydp. I have tried that and still having the same issue. I have tried these combinations and still the same issue
<div class="swiper-slide"><a href="#"><img src="src/images/one.jpg" width="90" height="172"/></a>Slider 1</div>
<div class="swiper-slide"><a href="google.com"><img src="http://localhost:8080/src/assets/one.jpg" width="90" height="172"/></a>Slider 3</div>
<div class="swiper-slide"><a href="#"><img src="/assets/one.jpg" width="90" height="172"/></a>Slide 4</div>
one.jpg:1 GET http://localhost:8080/src/images/one.jpg 404 (Not Found)
one.jpg:1 GET http://localhost:8080/src/assets/one.jpg 404 (Not Found)
one.jpg:1 GET http://localhost:8080/assets/one.jpg 404 (Not Found)
This is super strange. Do I need to have an entry in the “route”? do I need to import the images directory somewhere in my file?
If your using framework7,
There should be a folder called static, put your files there and then refer them by:
Try make that folder if missing.
Great that worked. Much appreciated.