Tengo un archivo JSON como este:
"images": { "thumbnail": "./assets/starry-night/thumbnail.jpg", "hero": { "small": "./assets/starry-night/hero-small.jpg", "large": "./assets/starry-night/hero-large.jpg" }, "gallery": "./assets/starry-night/gallery.jpg" }Mi código en Vue es:
<img v-bind:src="data.images.thumbnail" alt="" srcset="" height="100px" width="100px" />Y "funciona", devuelve un IMG. Pero la ruta de la imagen es ./assets/starry-night/gallery.jpg y creo que por eso no carga.
¿Tengo que engañar al router o algo?
./assets/starry-night/gallery.jpgSalida en Chrome.
Sus datos se tratan como una cadena, por lo tanto, está buscando la ruta que, por supuesto, no existe. Simplemente defina un const publicUrl = 'http://mysite.test/' en algún lugar para completar la URL de la imagen, como
<img v-bind:src="publicUrl + data.images.thumbnail" alt="" srcset="" height="100px" width="100px" />Además, puede hacer referencia a una carpeta haciendo
<img src="@/assets/starry-night/thumbnail.jpg"/>Resuelto con:
created() { this.publicURL = "https://6e222.csb.app"; },Y movió assets/xxx/ a la carpeta PÚBLICA en lugar de en SRC.