Voici mes données API exposées à partir de strapi.
J'ai une colonne post_content qui est un markdown, j'y ai téléchargé une image en utilisant l'éditeur WYSIWYG. Maintenant, les images téléchargées ont un chemin de
/uploads/f8d87d8b6b1e41fe9ecd965078c57dc1.png
C'est le chemin sur mon serveur Strapi qui a le port 1337.
Maintenant, sur mon application Nuxt, j'essaie d'afficher ce contenu en utilisant VueShowDown, évidemment, cela donne une erreur en tant que fichier introuvable car Nuxt fonctionne sur le port 3000 et il n'y a pas de fichier présent sur le répertoire Nuxt, le fichier est stocké sur le serveur strapi.
Dans de tels cas, comment afficher l'image, qui est stockée sur Strapi sur mon frontal.
Merci.
4 Réponses :
Le seul moyen pour le moment est d'ajouter à chaque image de votre application vue l'url et le port que votre application strapi utilise. Par exemple, si vous exécutez strapi dans votre environnement de développement local dans le port par défaut, vous devrez ajouter localhost: 1337 comme préfixe pour tester.
La raison en est que vous utilisez la méthode par défaut pour télécharger des images dans votre application et que strapi enregistre l'url sans le domaine.
Je pense que vous pouvez créer un problème sur le référentiel strapi et spécifier si vous souhaitez essayer cela en tant que problème ou en tant qu'amélioration.
Enfin, je pense également que c'est une bonne idée d'utiliser un service externe comme S3 sous forme amazon ou le stockage blob d'Azure pour télécharger vos fichiers statiques. Ce problème n'est pas présent sur ces services. J'utilise le stockage blob azure et strapi enregistre les fichiers avec l'URL correcte. Voir l'image ci-dessous
URL créée sur une réponse à l'aide du stockage d'objets blob Azure
Voici une liste de fournisseurs que vous pouvez utiliser pour votre projet, rappelez-vous simplement que le seul package officiellement pris en charge est pour AWS.
https://www.npmjs.com/search?q=strapi-provider-upload-
https://strapi.io/documentation/3.0.0-beta.x/guides/upload.html
Merci Abraham, je suis avec toi. Pour le moment, je ne pense pas à aller sur un cloud. encore à un stade très précoce. En ce moment, j'ai copié le dossier uploads de Strapi et je l'ai mis dans mon dossier sous Nuxt / Static. Pas d'une manière élégante que je connaisse.
salut, vous pouvez créer une variable calculée et remplacer toutes les chaînes '/ uploads /' avant de les afficher dans le modèle comme:
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/` );
}
},
pour afficher une image sur le frontend de strapi, vous pouvez simplement faire l'une des quatre ci-dessous:
<img :src="api_url + example.image.url" alt="" /> ou
<img :src="api_url + example.image[0].url" alt="" /> ou
<img :src=" http: // localhost: 1337 + example.image.url" alt="" /> ou
<img :src="`https://www.example.com` + example.image.url" alt="" />
remplacez example par le nom de votre requête, tel que post_comment.image.url
J'ai eu ce problème avec Gridsome et Nuxtjs et je n'ai pas trouvé d'aide nulle part, maintenant que je l'ai fait fonctionner sur divers sites Web que j'ai créés. Je partage les connaissances. Bonne chance
OP demande des images dans Markdown / WYSIWYG et non des images
au début, vous devez GET post_content avec quelque chose comme axios ou opolo de strapi et l'enregistrer en tant que données dans votre frontend. écrivez votre fonction dans created(){}, l'url de l'image serait quelque chose comme post_content.image.url alors si vous écrivez
<img :src=`https://www.example.com${post_content.image.url} + ` />
vous obtiendrez une url non définie, car car nuxt est un rendu de côté, vous devez ajouter un attribut v-if:"post_content.image" dans votre balise img pour que nuxt attende que l'image se charge puis lise son URL Bonne chance;)
Je n'ai pas vérifié si vous avez déjà créé un problème sur le dépôt GitHub, mais si vous pouvez le faire, j'apprécierai. Je l'ai testé et oui, il y a une amélioration à faire ici. Et je suis d'accord avec la réponse ci-dessous, il est recommandé d'utiliser un fournisseur externe pour stocker vos fichiers.