Estoy tratando de llamar a una imagen a través de un conjunto de datos ficticio en React.
Estoy usando el siguiente:
<li> <img src={testimonials[0].image} alt={testimonials[0].name}/> </li>Y mis datos se ven:
const testimonials = [ { name: "Julia Cameron", title: "Creative Director, VISA", image: `${require("../assets/image.jpg")}`, quote: "It's all good. I was amazed at the quality of the Design. We've seen amazing results already." }, { name: "Mark Jacobs", title: "Tech Lead, Google", image: `${require("../assets/image2.jpg")}`, quote: "The rebranding has really helped our business. Definitely worth the investment." }, { name: "Lisa Bearings", title: "Brand Coordinator, Facebook", image: `${require("../assets/image3.jpg")}`, quote: "The service was excellent. Absolutely wonderful! A complete redesign did it for us." } ];Sin embargo, esto no representa el img sino la etiqueta alt.
Puedo importar el img directamente con la fuente, por lo que la ruta es correcta:
import img from '../assets/image.jpg'¿Alguien puede confirmar lo que estoy haciendo incorrectamente? Obviamente está dentro de la línea específica:
image: `${require("../assets/image.jpg")}`,Esta no es la mejor solución, pero puede importar esas imágenes en el mismo archivo que el Array anterior, como
import image1 from "../assets/image1";entonces dentro de la matriz podría ser
image:{image1}Está pasando la fuente en String literal. La siguiente declaración devolverá una cadena que no es válida.
`${require("../assets/image.jpg")}` O necesita pasar el objeto Imagen importándolo directamente. O coloque las imágenes en la carpeta /public/assets y pase la cadena allí. Cualquiera de los siguientes funcionará para usted.
import img from '../assets/image.jpg'; <img src={img} alt="pic" />O
<img src="/assets/image.jpg" alt="pic" />simplemente use el nombre que importó en sus datos en lugar de la cadena literal
import Image1 from "../assets/image.jpg" import Image2 from "../assets/image2.jpg" import Image3 from "../assets/image3.jpg" const testimonials = [ { name: "Julia Cameron", title: "Creative Director, VISA", image: Image1, quote: "It's all good. I was amazed at the quality of the Design. We've seen amazing results already." }, { name: "Mark Jacobs", title: "Tech Lead, Google", image: Image2, quote: "The rebranding has really helped our business. Definitely worth the investment." }, { name: "Lisa Bearings", title: "Brand Coordinator, Facebook", image: Image3, quote: "The service was excellent. Absolutely wonderful! A complete redesign did it for us." } ];