Jump to content

Não consigo inserir imagens em alguns exemplos que peguei no bootstrap.


theofogagnoli

Postagens Recomendadas

Boa tarde pessoal!

 

Sou novo na área e estou fazendo um projeto de um curso onde tenho que criar um site (loja), usei alguns exemplos que temos no bootstrap, porém não consigo adicionar imagem nesses campos especificos. 

 

image.png

 

Sou novo na área e tentei de várias formas, porém não consigo colocar uma imagem nos circulos acima, identifiquei que provavelmente a imagem seria nessa parte role="img"

 

<div class="row container-fluid text-center p-lg-5">
    <div class="col-lg-4">
      <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"/></svg>
      <h2 class="fw-normal">Théo Fogagnoli</h2>
      <p>COO</p>
     
    </div>
 
    <div class="col-lg-4">
      <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"/></svg>
      <h2 class="fw-normal">Bernardo Silva</h2>
      <p>Desenvolvedor</p>
     
    </div>
 
    <div class="col-lg-4">
      <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"/></svg>
      <h2 class="fw-normal">Julia Campos</h2>
      <p>Marketing</p>
     
    </div>

 

 

 

 

 

 

O Segundo que utilizei foi esse, e pelo que vi para add a imagem teria que ser nesse role="img", porém fiz um monte de jeito diferente e nada.

 

 

image.png

 

 

 <hr class="featurette-divider">
 
  <div class="row featurette">
    <div class="col-md-7 order-md-2">
      <h2 class="featurette-heading fw-normal lh-1">Sobre nós <span class="text-body-secondary"></span></h2>
      <p class="lead">A B-Hats surgiu com a vontade de levar bonés de qualidade a um preço justo. No final de 2017 começamos a trabalhar também com bonés personalizados, além das melhores marcas nacionais que já vendiamos.
 
        Nossa personalização é feita através de termoadesivos importados, garantindo a melhor qualidade para você possa ter um boné exclusivamente seu. Consulte-nos para saber como é possível fazer a personalização do seu boné.
       
        Somos uma loja especializada em bonés e trabalhamos 100% Online.
       
        Sabemos que quando compramos algo online, sempre ficamos apreensivos aguardando a chegada do produto. Portanto fazemos o possível para assim que aprovado o pagamento já encaminhamos o produto conforme a forma escolhida para que ele seja entregue o mais rápido possível para nossos clientes.
       
        Também trabalhamos de forma mais transparente possível sempre dispostos a responder nossos clientes assim que surgir alguma dúvida, portanto não deixe de entrar em contato conosco.
       
        Trabalhamos com bonés com a melhor qualidade e melhores marcas disponíveis no mercado.</p>
    </div>
    <div class="col-md-5 order-md-1">
      <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role img="/img/estoque.jpg" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">500x500</text></svg>
    </div>
  </div>
 
   <hr class="featurette-divider">
 
    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading fw-normal lh-1">Nosso compromisso<span class="text-body-secondary"></span></h2>
        <p class="lead"> Sempre em busca de levar qualidade e variedade para nossos clientes.
 
          Trazemos mensalmente novas coleções de marcas diversas e promoções que cabem no seu bolso.
         
          Nosso diferencial é o envio do produto com agilidade, pois sabemos que esperar muito por uma compra é frustrante,
         
          Por isso temos parceria com as melhores transportadoras, para que seu pedido chegue rápido e em perfeitas condições.
         
          Nosso compromisso é trazer estilo e tranquilidade para sua vida com apenas alguns cliques.
          </p>
      </div>
      <div class="col-md-5">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">500x500</text></svg>
       
      </div>
    </div>
  • Curtir 1
Link to comment
Compartilhe em outros sites

  • 8 months later...

tenta colocar a url da sua imagem no xmlns ou no fill. ou substitua  toda a tag 

<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-bg)"/><text x="50%" y="50%" fill="var(--bs-secondary-color)" dy=".3em">500x500</text></svg>

por

<img src='url da sua imagem' alt='descrição da imagem'/>

 

  • Ajudou! 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...