Bonjour tout le monde, j’ai commencé un tutoriel sur Vuemastery qui explique les bases en html, css et Js avec la Vue 2 il n’y a pas très longtemps et je suis bloqué sur un détail. Je dois réussir à insérer une image jpg sur ma page html à l’aide de Js.
Problème, lorsque j’insère l’adresse de l’image que je souhaite afficher sur ma page html et que je refresh, ce n’est pas mon image qui s’affiche mais plutôt une icône qui montre que l’image est bel et bien présente mais qu’elle n’arrive pas à être chargée.
J’espère que l’image s’affiche bien dans mon message, sinon, l’image ressemble à une petite icône avec un paysage. Également, lorsque je fais clic gauche sur l’icône, on me donne l’option de charger l’image mais celle-ci ne se charge pas. voici le code html et Js que j’utilise pour vous situer :
<!DOCTYPE html>
<html>
<html lang="en">
</html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</body>
<body>
<div id="app">
<div class="nav-bar"></div>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!--Mount App -->
<script>
const mounteApp = app.mount ('#app')
</script>
</body>
</html>
Javascript:
var app = Vue.createApp({
data() {
return {
product: 'formation vidéo',
image: ''
}
}
})
Si vous avez la réponse à ce problème, n’hésitez pas ça m’aiderait énormément.
Merci à l’avance !
Renaud
