It only display a Dark Black overlay window with no Picture with Vue.js

[KaitoXion]

It only display a Dark Black overlay window with no Picture. Think i'll need help.

Am using Vue.js with the Visual Code Basic as the tool.

I have did the "import" as well as the "Vue.use()" at main.js; below is the code that I copied from the given demo site.

          <b-row>
            <b-col md="12">
              <silentbox-single
                src="../uploads/familyFree.jpg"
                description="The Arctic Light by Terje Sorgjerd"
              >
                <img src="../components/img/Phone2.png" width="200px">
              </silentbox-single>
            </b-col>
          </b-row>

I use bootstrap vue, could there be any problem when using with it.

[silencesys]

Is there any error in console?

[KaitoXion]

Thank you for your kind reply. So This is the only error message from console that I have no idea what it is about -_- there are non other; aside from the unimplemented function.

In Visual Studio Code / Vue.js ; there is no errors.

GET http://192.168.0.134:8080/sockjs-node/info?t=1560948443424 net::ERR_CONNECTION_TIMED_OUT
AbstractXHRObject._start @ sockjs.js?98ca:1605
(anonymous) @ sockjs.js?98ca:1494
setTimeout (async)
AbstractXHRObject @ sockjs.js?98ca:1493
XHRCorsObject @ sockjs.js?98ca:2871
InfoAjax @ sockjs.js?98ca:356
InfoReceiver._getReceiver @ sockjs.js?98ca:539
InfoReceiver.doXhr @ sockjs.js?98ca:556
(anonymous) @ sockjs.js?98ca:525
setTimeout (async)
InfoReceiver @ sockjs.js?98ca:524
SockJS @ sockjs.js?98ca:730
SockJSClient @ SockJSClient.js?6fe6:39
initSocket @ socket.js?d175:13
(anonymous) @ socket.js?d175:32
setTimeout (async)
(anonymous) @ socket.js?d175:31
EventTarget.dispatchEvent @ sockjs.js?98ca:170
(anonymous) @ sockjs.js?98ca:969
setTimeout (async)
SockJS._close @ sockjs.js?98ca:957
SockJS._receiveInfo @ sockjs.js?98ca:786
g @ sockjs.js?98ca:66
EventEmitter.emit @ sockjs.js?98ca:86
(anonymous) @ sockjs.js?98ca:561
setTimeout (async)
InfoReceiver.doXhr @ sockjs.js?98ca:558
(anonymous) @ sockjs.js?98ca:525
setTimeout (async)
InfoReceiver @ sockjs.js?98ca:524
SockJS @ sockjs.js?98ca:730
SockJSClient @ SockJSClient.js?6fe6:39
initSocket @ socket.js?d175:13
(anonymous) @ socket.js?d175:32
setTimeout (async)
(anonymous) @ socket.js?d175:31
EventTarget.dispatchEvent @ sockjs.js?98ca:170
(anonymous) @ sockjs.js?98ca:969
setTimeout (async)
SockJS._close @ sockjs.js?98ca:957
SockJS._receiveInfo @ sockjs.js?98ca:786
g @ sockjs.js?98ca:66
EventEmitter.emit @ sockjs.js?98ca:86
(anonymous) @ sockjs.js?98ca:561
setTimeout (async)
InfoReceiver.doXhr @ sockjs.js?98ca:558
(anonymous) @ sockjs.js?98ca:525
setTimeout (async)
InfoReceiver @ sockjs.js?98ca:524
SockJS @ sockjs.js?98ca:730
SockJSClient @ SockJSClient.js?6fe6:39
initSocket @ socket.js?d175:13
(anonymous) @ client?e942:176
(anonymous) @ index.js?http://192.168.0.134:8080/sockjs-node:177
./node_modules/webpack-dev-server/client/index.js?http://192.168.0.134:8080/sockjs-node @ app.js:5817
__webpack_require__ @ app.js:724
fn @ app.js:101
1 @ app.js:6509
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794

[silencesys]

That error is not related to Silentbox, it seems that something at your server is taking too long to load (it might be the image). I have also tried running Silentbox with Bootstrap vue and had no errors, thus I wonder if the blank image is not due to the wrong image link or that thing that is taking too long to load.

[KaitoXion]

I'm running of local at this moment.

server is taking too long to load (it might be the image) ^ hmm, maybe I'll try click it and let the overlay stay for a while and see what happen.

Thank you for your kind reply. I'll come back to you with updates after I've gone through the test.

[KaitoXion]

ok, I have tried this too.

I find something a bit different in firebox, which is shown in the screenshot below.

   ```
   <silentbox-single
            :src="image"
            description="The Arctic Light by Terje Sorgjerd"
          >
            <img :src="image" width="200px"/>
            </silentbox-single>

export default { data(){ image:"../components/img/phone2.png", } }

![Capture](https://user-images.githubusercontent.com/23281263/59845285-91f6fc80-938f-11e9-9f97-709d02a7aed7.PNG)

[silencesys]

That means the image URL you specified is not a valid one.

[KaitoXion]

Hmm... ok. so I checked a few times. I have make sure the src file is at the specific location. I also try to mimic how it's written in: https://silentbox.silencesys.com/ (The Demo)

             <silentbox-single
                  src="./images/brandIcon.png"
                  description="The Arctic Light by Terje Sorgjerd"
                >
                  <img src="../components/img/brandIcon.png" width="200px">
                </silentbox-single>

   <silentbox-group>
    <silentbox-item src="../components/img/brandIcon.png" description="Sunken dreams II. by Arbebuk">
        <img src="./images/brandIcon.png" width="200px">
    </silentbox-item>
    </silentbox-group>

The problem is the same; where the <img src="./images/brandIcon.png"> / <img src="../components/img/brandIcon.png" width="200px"> tag is the only one showing the image, but not the overlay.

Could I receive your working example code as reference? I understand it probably is too much to ask for a noop like me. Your kindness is very much appreciated. (I really want to learn)

These are where my image file directory is. src="../components/img/brandIcon.png"

src="./images/brandIcon.png"

[silencesys]

Could you please set the src image to https://img.silencesys.dev/600x300 and see if there will be any image in the overlay?

[KaitoXion]

I created a new project. Dependency are default, with only 1 extra dependency installed which is ;vue-silentbox

No error in browser's console (google chrome) -- none_

this is the code implemented. Notice there are 2 section,

1st is with src="https://img.silencesys.dev/600x300" & 2nd is with src="./assets/logo.png"

 <silentbox-single
                src="https://img.silencesys.dev/600x300"
                description="The Arctic Light by Terje Sorgjerd"
              >
                <img src="https://img.silencesys.dev/600x300" width="200px">
              </silentbox-single>

               <silentbox-single
                src="./assets/logo.png"
                description="The Arctic Light by Terje Sorgjerd"
              >
                <img src="./assets/logo.png" width="200px">
              </silentbox-single>

src="https://img.silencesys.dev/600x300"

src="./assets/logo.png"

[silencesys]

As I already said, that is due to the non-valid image URL. I'm not sure how familiar you're with relative path imports, take a look here. However, Silentbox's src property is not the same as src property of the img tag, thus is not processed as an asset and the url is not translated with vue-cli as are other assets.

The image URL you pass to Silentbox should be always pointing to the public folder of your project, otherwise it will might not work correctly.

[KaitoXion]

Thanks for the information. i have checked out the given link; but I couldn't make it work.

since it works for you. that just mean I am just too new to these things. There don't seems to have a youtube video that I can refer to as well.

So thank you; it's very much appreciated. :)

[silencesys]

Message me on twitter, I'll send you a working example or help you with your implementation, if you want.

[KaitoXion]

helping with implementation

err... this kinda much. I don't know how to reach. I'm send you a pm on twitter. Is nice to have a working example though.

I had just send you a message on twitter. thank you very much for your kindness.