Putting a clicable image in the swipper

Questions
1

Hi,

I am trying to put an image in the swiper. If I reference the image from the local file, it doesnt seem to work:

swiper
swiper1117×78 3.87 KB

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?

Thanks

2

According to your code, you are missing an opening quote character from your href attribute. Try <a href=“#”>

3

Hi there,

Thanks, I fixed it, but that didnt seem to be the issue. I still cant see the local image :slightly_frowning_face:

4

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:

ROOT FOLDER
--IMAGES FOLDER
  ---one.jpg
--HTML FOLDER
  --- index.html

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.

5

Hi,

My directory structure is as follows:

mypp
– assets-src
– cordova
– index.html
– src
---- assets
---- css
---- fonts
---- images
------ one.jpg
---- pages
------ 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.

6

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
http://localhost:8080/src/images/one.jpg

7

Thanks Kerrydp. I have tried that and still having the same issue. I have tried these combinations and still the same issue :frowning:

    <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>

I get:

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?

8

If your using framework7,
There should be a folder called static, put your files there and then refer them by:
<img src="static/foo/bar.jpg">
Try make that folder if missing.

1 Like
9

Great :slight_smile: that worked. Much appreciated.