I'm using Nuxt 3
and this is directories structure
images are loaded like this
<img src="/images/index/pic-left.svg" />
I've also tried (start without / )
<img src="images/index/pic-left.svg" />
and it didn't worked again
What's the problem ?
In Nuxt3, the directory is now public and not static.
So it should be /images/index/pic-left.svg.
Related
I am working on some static pages using Nuxt.js (MPA). Whenever I run the generate command, all URLs start from page, i.e /customer/. For example, my structure is:
pages
|customer
|new
- index.vue
- index.vue
And in index.vue I have linked to customer/new page as:
<nuxt-link to="customer/new"> <b-button class="btn-sm btn-success" >nuevo</b-button></nuxt-link>
all works fine if I use:
npm run dev
But if I use:
npm run generate
the link in the button link change to /customer/customer/new instead of /customer/new.
Thank you.
Your link have to be relative to the base URL of your app, see https://nuxtjs.org/api/configuration-router#base
So to fix your issue, declare your link with a starting slash as follows:
<nuxt-link to="/customer/new"> <b-button class="btn-sm btn-success" >nuevo</b-button></nuxt-link>
In my RN application, I use react-native-pdf. I want to show a file which is in the file system of the app. But when I set the source it doesn't work and the app can't identify the path. How can I set the path properly?
<Pdf
source={{ uri:'file:///terms.pdf'
/>
It should be below. when I tried that, it worked. And there is no bug about that on the repository of react-native-pdf. Maybe your version of react-native-pdf has bug. You should get this version => 5.1.6.
<Pdf
source={uri:"file:///absolute/path/to/terms.pdf"}
/>
i created a vue project using vue-cli 3 and while working in my local env i managed to present all images in components html part the following way:
<template>
<img class="logo" src="#/assets/images/logo.svg" alt="logo">
</template>
in my machine the full path to the image (starting from the src folder as root) is src/assests/images/logo.svg
when running the project on the local env the image loads and it's source is
/assets/images/logo.svg which redirects to http://localhost:8080//assets/images/logo.svg.
now when i upload the project to my staging env the source changes (and i cant figure out why) to src="/img/logo.230e726c.svg" and the image is missing.
following info i found online i also tried:
src="~#/assets/images/logo.svg" which didn't work as well .
any idea what am i missing here and how should i import images in my template? or how did the source url turn to this (what seems to be quite random) path?
UPDATE
i noticed that on my local machine , when inspecting the result in the dev tools, the content type is Content-Type: image/svg+xml; charset=UTF-8 and when inspecting on staging the content type is content-type: text/html
plus there also another header which only appears in staging and its content-encoding: gzip
, i'm not sure but does this should serve as some clue??
another thing worth mentioning, when trying to upload png every thing works fine and the image elemnt looks like this:
<img data-v-7d622f5c="" src="data:image/png;base64,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" alt="logo" class="logo">
I have the following img tag :
<img class="logo" src="../../assets/logo/logo_blue.png">
project structure
I don't know why but I only get the following error message:
GET http://localhost:8080/assets/logo/logo_blue.png 404 (Not Found)
try <img class="logo" src="#/assets/logo/logo_blue.png">
here '#' refers to root directory
will this work?
<img class="logo" src="./assets/logo/logo_blue.png">
I believe the path to that image entirely depends on the relative path between the page and image at deployment time. If you're not using HTML5 history mode, this ./assets/ prefix should always work.
I tried to use an image file in my HTML template. But when I run the server and open it in the browser the image is not getting loaded. But if I run the HTML file individually it's working fine. I mentioned the path of images folder in file settings.py, MEDIA_ROOT, also. Still it is not working.
settings.py:
MEDIA_ROOT = 'C:/Users/Vicky/Documents/Django/krish/media/images/'
HTML:
<img src="../media/images/Untitled.jpg" width ="267" height="122">
I also tried giving:
<img src="Untitled.jpg" width ="267" height="122">
How can it be made to work?
I had this problem when I started Django too :)
The Django server does not serve static files by default. Usually you need to use a separate server for this, but in a development environment you can use a shortcut.
Add this to your urls.py:
if settings.DEBUG:
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
)
Don't use this in production. It is slow, unstable and insecure.