无法在 thymeleaf 和 Spring 上加载图像

Question

我正在将 thymeleaf 与 SpringMVC 一起使用，并且正在尝试将图像加载到视图中。

在项目中，我的图片位于 MyApp/WebContent/resources/images 上

我试过了：

<img src="WebContent/resources/images/photo.png" 
    class="img-responsive" width="100" height="100">
</div>

我得到下一个错误：

No mapping found for HTTP request with URI [/MyApp/WebContent/resources/images/photo.png] in DispatcherServlet with name 'thymeleaf'

我也尝试将图像放在下一个路径上：

MyApp/main/src/resources/images

MyApp/main/src/resources/static/images

MyApp/WebContent/WEB-INF/resources/images

MyApp/WebContent/WEB-INF/images

但它永远不会起作用

我编辑以添加我项目中的依赖项。

来自 pom.xml 的依赖项：

<dependencies>

        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>5.2.6.Final</version>
        </dependency>

        <!-- Hibernate validator -->

        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>5.2.5.Final</version>
        </dependency>

        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>2.0.1.Final</version>
        </dependency>


        <!-- Javassist (required by Hibernate) -->
        <dependency>
            <groupId>javassist</groupId>
            <artifactId>javassist</artifactId>
            <version>3.12.1.GA</version>
        </dependency>

                        <!-- MYSQL -->

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.40</version>
        </dependency>

        <!-- SPRING -->


        <!-- Spring Context -->

        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
          <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring ORM -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring MVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring tx -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring AOP -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring web -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-core</artifactId>
            <version>4.2.4.RELEASE</version>
        </dependency>


        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>4.2.2.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>4.2.5.RELEASE</version>
        </dependency>

        <!-- Spring test -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>4.3.7.RELEASE</version>
            <scope>test</scope>
        </dependency>

        <!-- SLF4J -->

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.25</version>
        </dependency>

        <!-- CGLIB required by Spring -->

        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib-nodep</artifactId>
            <version>3.2.6</version>
        </dependency>

        <!--JUnit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.4</version>
            <scope>test</scope>
        </dependency>


<!-- Tag libs support for view layer -->

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>

</dependency>


<dependency>
    <groupId>commons-dbcp</groupId>
    <artifactId>commons-dbcp</artifactId>
    <version>1.2.2</version>
</dependency>



    <dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
    <dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>


<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.9.3</version>
</dependency>

<dependency>
    <groupId>commons-digester</groupId>
    <artifactId>commons-digester</artifactId>
    <version>2.1</version>
</dependency>

 <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>1.7.25</version>
</dependency>

   <dependency>
        <groupId>org.hibernate.javax.persistence</groupId>
        <artifactId>hibernate-jpa-2.0-api</artifactId>
        <version>1.0.1.Final</version>
    </dependency>
    </dependencies>


            <!-- Optional, for bootstrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>

控制器：

@RequestMapping("/choose")
    public String index() {
        return  "choose";

    @RequestMapping(value = "/categories", method = RequestMethod.GET)  
    public String getAllCategories(Model model)
    {
        model.addAttribute("clist", productService.listCategories());
        return "categories";
    }

    @RequestMapping(value = "/products", method = RequestMethod.GET)
    public String getAllProducts(Model model) {
        model.addAttribute("plist", productService.listProducts());

        return "products";
    }

项目结构：

   - pom.xml
   - src/
         - main/
               - java/
                     - controller/
                     - model/
                            - dao/  *it contains the interface and the implementation
                            - service/  *it contains the interface and the implementation

               - resources/ *it contains the hibernate and spring configuration
               - WebContent/
                     - thymeleaf-servlet.xml
                     - web.xml
                     - WEB-INF/
                            -thymeleaf/ *it contains the html pages for the view
                     - META-INF/
                     - resources/
                            - images/ *it contains the images I want to display on the view
     - test/

Answer 1

您可以将图像放在 ./src/main/resources/static/images 中，图像 src 应该是：

<img src="/images/photo.png" class="img-responsive" width="100" height="100"/>

如果你不把 / 放在开头，它会尝试以 URL 的形式访问它，而不是在静态文件夹中搜索它。

更新： 请看一下这个示例项目：

https://github.com/adinafometescu/tutorials/tree/master/spring-boot-image

我用 spring boot 和 thymeleaf 创建了一个示例项目来显示一个简单的图像。

Answer 2

尝试在 thymleaf 中使用它 1）你必须从你的主/资源文件夹中获取静态内容，然后在你的视图中你这样做 试过了：

<img src="-(tilde 
 symbol)/../public/static/images/photo.png" 
    class="img-responsive" width="100" height="100">
 </div>

Answer 3

在你的配置文件中声明这样的静态资源

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"<your Base package-name>"}
public class WebConfig implements WebMvcConfigurer {

// Declare your Static resources
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/Webcontent/**).addResourceLocations("/")
.setCachePeriod(31556926);
}

 then put img tag <img src="/WEB-INF/resources/images/photo.png" width="200px" height = "100px"/>

或在 XML 中：

<mvc:resources location="/Webcontent/" mapping="/webcontent/**" /> //not tested but see if it works!!

这是 Java 配置（大部分情况下都可以！），因为 XML 配置太复杂了， 试试这个，让我知道.. 干杯