CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsstrapi
just10minutes
just10minutes

Reputation: 611

Using Images uploaded on Strapi on Nuxt front end

Below is my API data exposed from strapi.

http://myjson.com/1fgx71

I have a column post_content which is a markdown, I have uploaded image there using WYSIWYG editor. Now images uploaded has path of 

/uploads/f8d87d8b6b1e41fe9ecd965078c57dc1.png

This is the path on my Strapi server which has port of 1337.

Now on my Nuxt app I try to show this content using VueShowDown, obviously it gives error as file not found because Nuxt runs on port 3000, and there is no file present on Nuxt directory, file is stored on strapi server.

In such cases how do I show the image, which is stored on Strapi on my front end.

Thank you.

Upvotes: 3

Views: 7084

Answers (4)

Milan
Milan

Reputation: 444

hi you can create a computed variable and replace all '/uploads/' strings before show in template like:

data() {
    return {
        strapi_url: 'https://url-from-your-strapi.com' 
    }
}, computed: {
    changed_post_content: function () {
        return post_content.split('/uploads/').join(`${this.strapi_url}/uploads/` );
    }
},

Upvotes: 8

Abraham Garcia
Abraham Garcia

Reputation: 31

The only way right now is to add to every image in your vue app the url and the port that your strapi app is using. For example, if you're running strapi in you local development enviroment in the default port, then you will need to add localhost:1337 as prefix to test.

The reason is that you are using the default way to upload images in your app and strapi save the url without the domain.

I think you can create an issue on the strapi repository and specify if you want to try this as an issue or as an enhancement.

Last, I also think that is a good idea to use an external service like S3 form amazon or blob storage from azure to upload your static files. This problem is not present on those services. I'm using azure blob storage and strapi is saving the files with the correct url. See the image below

Url created on a response using azure blob storage

Here is a provider list that you can use for your project, just remember that the only officially supported package is for AWS.

https://www.npmjs.com/search?q=strapi-provider-upload-

https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload

Upvotes: 3

kouroshtajalliepour
kouroshtajalliepour

Reputation: 75

at first u need to GET post_content with something like axios or opolo from strapi and save it as a data in your frontend. write your function in created(){}, the url in of the image would be something like post_content.image.url then if u write

<img :src=`https://www.example.com${post_content.image.url} + ` />

you will get url not defined thats coz nuxt is severside rendering u have to add a v-if:"post_content.image" attribute in ur img tag so that nuxt waits for the image to load and then read its url Good luck ;)

Upvotes: 1

Sebastian
Sebastian

Reputation: 442

to have an image show on the frontend from strapi you can simply do one of the four below:

<img :src="api_url + example.image.url" alt="" /> or

<img :src="api_url + example.image[0].url" alt="" /> or

<img :src="http://localhost:1337 + example.image.url" alt="" /> or

<img :src="`https://www.example.com` + example.image.url" alt="" />

replace example with your query name such as post_comment.image.url

I had this issue with both Gridsome and Nuxtjs and couldn't find help anywhere, now that i got it to work on various websites i built. I'm sharing the knowledge. Good Luck

Upvotes: -1

Related Questions